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.
Now if we were to refresh our Web page and take a look at this in our web browser
you'll notice that nothing has changed even though we've specified the top in left position the element
is in the exact same place it was prior to adding those declarations.
The reason for this is because our position is still set to static.
Let's go ahead and change the position to relative and see the difference
we can now see that this element has moved from 50 pixels from the left side of our content area and
50 pixels down from the top of our content area.
Now let's work with nested Divs.
We're going to create a div inside this div and see how the relative positioning is affected when we're
working with nested in parent Divs.
The first thing we need to do is create
the I.D. selector for the nested div we'll call it Div 2
and we'll create some properties for this div
we're making it a different color and we'll also make it a different size so then that we can clearly
see a distinction between our original div and this new nested div
we'll keep the position is relative to see how a relative position div behaves inside of another div
that it also has the same position.
Declaration so we'll go ahead and insert our nested div in our body
reference I.D. selector Div 2
and we'll just save our file
and this is what the the new document looks like.
We can see that our nested div is situated within our parent or container div.
Now we want to move the nested div 80 pixels from the top and left relative to the parent div in order
to do this.
All we need to do is add the top in left declarations to our style rule.
Now when we save our file and refresh we can see that the nested div has moved 80 pixels from the top
and 80 plus pixels from the left relative not to the web browsers content area but to its parent div.
So keep that in mind.