Static Positioning

In the final section of this tutorial, I review the position: static; declaration. Change your CSS so it reflects the values shown in Listing 6.

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

Listing 6. Declaring the div as a static div

With the CSS set as above, preview your page in your browser. It will look very much like the relative div did, as you can see in Figure 8.

Figure 9. The div now has a static value

Change the top and left property values to 100 pixels so you can test the reaction of the div. When you have made those changes, preview the page in your browser. You should see no change at all. The static value of the position property does not respond to the top and left properties. Try this again, except this time, remove the top and left properties and add new margin properties of margin-top: 50 pixels; and margin-left: 50 pixels; as shown in Listing 7.

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

Listing 7. Setting the margins on the static div

When you have completed that, preview your page one more time. You should see something very similar to Figure 10.

Figure 10. Using margins on a static div

As you can see from figure 10, the static div responds just fine to margin settings. The values for these margins are calculated against the h1 element and the body margin/padding, in the same way as they would be with the relative div. The static div is also said to be in the flow of the page, which means that surrounding elements affect its position. To demonstrate this, add a new declaration into the h1 rule. Add the margin-top property as shown in Listing 8.

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

Listing 8. Adding a top margin to the h1 element

With this change made, preview your page in the browser. Your results should be similar to Figure 11.

Figure 11. Adding a top margin to the h1 element

Notice how the top margin has pushed down the h1 element. The div however has maintained its positional relationship with the h1—it is still 50 pixels below the h1 element.

Conclusion

That concludes this tutorial. You have taken your first look at positioning elements within your page using CSS. I have covered the position property and some of its values—absolute, relative, and static. I have also reviewed how margins can affect the position of elements within a page. Finally, I reviewed what it means when elements are in or out of the page flow.

This tutorial is by no means exhaustive. It was simply aimed at giving you an insight into positional CSS. I hope it achieved that for you.