Some interface designs may call for elements to be layered or stacked on top of each other.
There are many ways that elements will naturally stack on top of each other. But we can control this stacking order using a combination of the position and z-index properties.
In this final episode of AtoZ CSS season one we’ll learn about:
- The default stacking order of the document
- What a stacking context is and how they interact with each other
- How
z-indexcontrols layer order within stacking contexts - And a method I use for standardising
z-indexacross a project
Default Stacking
When writing our HTML, elements that appear lower down in the document, naturally stack above elements further up.
[code language="html"]
<body>
<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>
</body>
[/code]
Given this snippet of HTML, the footer would stack on top of the main content area which would stack on top of the header if they were all positioned to overlap each other.
Elements can be overlapped by using a combination of position properties and offset properties top, right, bottom and left.
If I set position:absolute on each of these elements, they will all layout on top of each other. The footer comes last in the document so by default stacks on top of the previous two elements.
Continue reading %AtoZ CSS Screencast: The Z-index CSS Property%
by Guy Routledge via SitePoint
