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.
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
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
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
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
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