From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Controlling stacking order - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Relative positioning7m 59s
-
(Locked)
Absolute positioning8m 59s
-
(Locked)
Fixed positioning4m 23s
-
(Locked)
Controlling stacking order8m 31s
-
(Locked)
Clipping content8m 21s
-
(Locked)
Controlling content overflow5m 38s
-
(Locked)
Positioning elements: Lab3m 59s
-
(Locked)
Positioning elements: Solution3m 52s
-
(Locked)
-
-
-
-
-