Stacking without the z-index property
When thez-index property is not specified on any element, elements are stacked in the following order (from bottom to top):
- The background and borders of the root element.
- Descendant non-positioned elements, in order of appearance in the HTML.
- Descendant positioned elements, in order of appearance in the HTML.
Seetypes of positioning for an explanation of positioned and non-positioned elements.
Keep in mind, when theorder property alters rendering from theorder of appearance in the HTML withinflex containers, it similarly affects the order for stacking context.
Example
In this example, DIV #1 through DIV #4 are positioned elements. DIV #5 is static, and so is drawn below the other four elements, even though it comes later in the HTML markup.
HTML
html
<div> <strong>DIV #1</strong><br />position: absolute;</div><div> <strong>DIV #2</strong><br />position: relative;</div><div> <strong>DIV #3</strong><br />position: relative;</div><div> <strong>DIV #4</strong><br />position: absolute;</div><div> <strong>DIV #5</strong><br />position: static;</div>CSS
css
strong { font-family: sans-serif;}div { padding: 10px; border: 1px dashed; text-align: center;}.static { position: static; height: 80px; background-color: #ffffcc; border-color: #999966;}.absolute { position: absolute; width: 150px; height: 350px; background-color: #ffdddd; border-color: #990000; opacity: 0.7;}.relative { position: relative; height: 80px; background-color: #ccffcc; border-color: #669966; opacity: 0.7;}#abs1 { top: 10px; left: 10px;}#rel1 { top: 30px; margin: 0px 50px;}#rel2 { top: 15px; left: 20px; margin: 0px 50px;}#abs2 { top: 10px; right: 10px;}#sta1 { background-color: #ffffcc; margin: 0px 50px;}