Relative Positioning

In this section of the tutorial, I explain relative positioning. I begin by making a change or two to the CSS, and then you will see how the relatively-positioned element interacts with other elements on the page. Change the CSS in your page to read like the code in listing 4.

#blue {
 width: 100px;
 height: 100px;
 position: relative;
 background-color: blue;
 }   

Listing 4. Setting the CSS on the blue div to {position: relative;}

Leave the h1 element below the div in your code. Once you have changed your CSS, preview the page in your browser.

Figure 4. The blue div relatively positioned

Notice that there is quite a bit of difference between the behavior of the absolutely-positioned div and the new relatively-positioned div. You can clearly see that the h1 element has been pushed down the page by the div. A relatively-positioned div is said to be in the document flow. As such, the blue div will now occupy space at the page level, and its existence will affect surrounding elements.

To prove a point, reverse the order of the elements in the code, just as I did earlier, so that the h1 element appears above the relatively-positioned div in the source. Preview your page in the browser.

Figure 5. The elements’ order reversed in the code

With the code order reversed, the elements reverse when the browser displays them. From this, you can see that the order in which the elements appear in your code is important when using relatively-positioned divs.

When you changed the CSS to display a relatively-positioned div, you also removed the top and left property declarations. Add them back in and see what happens to your div when you use these settings. Change your CSS to look like Listing 5.

#blue {
 width: 100px;
 height: 100px;
 top: 0;
 left: 0;
 position: relative;
 background-color: blue;
 margin: 0;
 }
 
 h1 {
 border: 1px solid #000;
 margin: 0;
 } 
  

Listing 5. Zeroing the margins and adding a border to the h1 element

I’ve added a border to the h1 element and zeroed the margins on both elements to enable me to easily see the effect when I make subtle changes to the blue div.

Figure 6. Everything set to zero

With the alterations to your CSS in place, you can preview your page in your browser. As you can see in Figure 6, I have a nice clean starting point. Perfect. However, before I move on any further, have you noticed anything different in the behavior of the relatively-positioned div to the one shown by the absolutely-positioned div? If not, take a look at Figure 7, where I have put them side by side.

Figure 7. Relative and Absolute positioning. Both divs are set at top 0 & left 0

Notice the way the absolutely-positioned div has taken its position in relation to the containing element, the body in this case. The relatively-positioned div has taken its positional values relative to the h1 element it follows in the source; two very different behaviors that are clearly seen in Figure 7. Also notice that the absolutely-positioned div is not restricted by page margins and is tight against the browser chrome.

The relatively-positioned div reacts quite differently to the default body margins. As the relative div is within the flow of the page, it is affected by the margins on the body. Try adding a new rule to zero the body margins and watch the relatively-positioned div slide to the left edge of your page. It cannot, of course, go tight to the top of the page, as it will be constrained by the h1 element that is in the way. The h1 will also move due to the margin zeroing.

Note: Opera browsers use a default padding on the body element instead of the default margin that Internet Explorer and Gecko-based browsers do. If you are using Opera to experiment with this tutorial, you must zero the padding to get the div and h1 elements to move up next to the browser chrome in the relatively-positioned example.

Both the relative and absolutely-positioned divs will respond to margin settings, including negative values. Try increasing and decreasing the margin values. Once you have tried adjusting the margin values, try adding top and left declarations to your relatively-positioned div. You will see this div also responds to those values. The div is still positioned relative to the h1 element, unlike the absolutely-positioned div which is positioned with respect to its container. Figure 8 shows the relatively-positioned div using top and left property values of 50 pixels. (The body margins have not been zeroed in the example.)

Figure 8. Relatively positioned, top: 50 pixels; left: 50 pixels;