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

Core Material

1. static
2. relative
3. absolute
4. fixed
5. sticky
6. z-index

There are many ways of showing and hiding content:

1. Make Elements Disappear & Reappear
2. Hide & Show Elements

Suggested Reading

Read Chapter 15, Layout, in HTML and CSS: Design and Build Websites by Jon Duckett.

Recommended Resources

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