From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Controlling stacking order

Controlling stacking order - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Controlling stacking order

You may have noticed in several of our exercises so far that positioning elements can often result in them overlapping each other. To make sure that your layouts behave the way that you expect them to, you need to understand the rules that govern the stacking of these elements and how you can control stacking through CSS. So I have the stacking.htm file open, and there are a few changes. For the most part it's the same, but we have some text now that describes Z-index, which is the property that we are going to be controlling, and then we have our containing element and the three div tags inside of it, so that much is the same. But currently, now, all three of those elements have been positioned using absolute positioning. And if I preview the file in a browser, you can see these three elements are stacking one right on top of the other because their offsets aren't far enough to keep them from overlapping. So notice that by default right now we are not controlling the stacking in…

Contents