Many first-time students latch onto CSS positioning believing that it will solve their web page layout problems. Broadly speaking, this isn’t true: layout is the job of other aspects of CSS. While positioning certainly has a role to play in layout, it’s much more effective if you are aware of how and where to use the different positioning models, rather than trying to apply them as a desperate “fix”.
Goals: Explore and apply each of the positioning models on a web page.
Prerequisite: Introduction to CSS
Total practice time: 2 hours
There are many ways of showing and hiding content:
Read Chapter 15, Layout, in HTML and CSS: Design and Build Websites by Jon Duckett.
Go through the excellent live tutorials on positioning at Codecademy.
Read Shay Howe’s detailed piece on CSS Positioning.
In The Future
You should be aware that the traditional positioning values will be joined by several new ones in the near future, including
page. However, no mainstream browser yet supports them; the moment two or more vendors do so, coverage will be added here.
Photograph of Sumela Monastery, Trabzon province, Macka district, Altindere village by Mustafa Gundas
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.