How To Control Stacking Order In Css: Page Layouts


show more Controlling stacking order provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts show less
please wait ...

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 i...

Controlling stacking order
Video duration: 8m 31s 8h 57m Beginner

Viewers:

Controlling stacking order provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts

Subject:
Web
Software:
CSS
Author:
please wait ...