From the course: CSS Essential Training
Join today to access over 23,200 courses taught by industry experts.
Position and z-index - CSS Tutorial
From the course: CSS Essential Training
Position and z-index
- [Instructor] So far, we've talked about how elements can be placed along the X and Y axis, but there's actually a third axis, the Z axis. When an HTML element is added within the same container, the elements are stacked in layers on the Z axis. This is called the stacking context. An element with a higher stack level is displayed in front of the element with a lower stack level. The stacking context depends on the order, the type of the element, and how they're positioned. The stacking order applies to elements that share a common containing element. In this example, box one and box two are in their own stacking context within the section block. The same goes for box three and box four, but the section blocks also have a common containing element, the body tag, which then forms another stacking context. Elements stack on top of each other by default, so most of the time, it's hard to see how they're stacked on the Z…
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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.