Lecture Notes

Section 1: Introduction

Course Objectives

Section 2: CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS - Color Names and Codes
CSS Classes and Spans
CSS Divisions - DIVs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project - Introduction
CSS Project - CSS Rules
CSS Project - Navigation Rules
CSS Project - Responsive CSS
CSS Project - Page Elements

Lecture Notes

Course: CSS Fundamentals View Course Outline

Created by:





1h 47m 20s

Skill Level:




Students Enrolled:




Certification Type:

Completion Certificate

Lecture: CSS Relative Positioning

relative positioning allows us to add additional properties to a position declaration, that specify the top, left, right, and bottom position coordinates of the element.

To illustrate an example, let's add the following properties to our style rule.

top: 50px;
left: 50px;

After refreshing the page, you will notice nothing has changed. The <div> is in the exact same location as it was.

This is because these additional properties do not work with static positioning. Let's see what happens if we add a relative position declaration.

position: relative;

After refreshing the page, the <div> has moved 50px down, and to the right, relative to the content area, which at this point is defined by our body tag.

Now let's create a nested <div>, inside #div-1. We will call it #div-2. Make it a bit smaller and a different color so we can clearly see the parent <div> when we nest it. Keep the positioning as relative.

#div-2 {
background-color: blue;
width: 350px;
height: 350px;
position: relative;

Now we will create the <div> in our <body> tag and reference id selector #div-2.

This is what it looks like in our browser. We have the parent <div> in blue, and nested <div> in yellow.

The next thing we want to do, is move the nested <div> 80px from the top, and left relative to the parent <div>.

All we need to do is add the top, and left values to our style rule.

When we refresh, you can see the nested <div> has moved 80px down and right, relative to it's parent <div>.