From the course: CSS Essential Training
Join today to access over 25,200 courses taught by industry experts.
Position and z-index
From the course: CSS Essential Training
Position and z-index
- [Instructor] So far, we've talked about elements being placed along the X and Y axis, but there's also a third, the Z axis. HTML elements within the same container are stacked in layers on the Z axis, creating a stacking context. An element with a higher stack level is displayed in front of the element with a lower stack level. The stacking order applies to elements that share a parent element. In this example, box one and box two are in the same stacking context. Box three and box four are in another stacking context. The stacking context can also be nested. In this example, the two section blocks also share a parent, the body tag. This forms another stacking context. You can change the default stacking order using the Z index property, but this only works when the element has position applied to it. Let's look at an example in Codepen. The HTML element shown with a gray background is followed by the body element…
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.