Tue Dec 31 2024
Stacking order in CSS layout
What is stacking order ?
The stacking order refers to the order in which elements are painted on the screen along the z-axis. Elements with a higher stacking order are painted on top of elements with a lower stacking order.
Example of stacking order
<div id="abs1" class="absolute">
<strong>DIV #1</strong><br />position: absolute;
</div>
<div id="rel1" class="relative">
<strong>DIV #2</strong><br />position: relative;
</div>
<div id="rel2" class="relative">
<strong>DIV #3</strong><br />position: relative;
</div>
<div id="abs2" class="absolute">
<strong>DIV #4</strong><br />position: absolute;
</div>
<div id="sta1" class="static">
<strong>DIV #5</strong><br />position: static;
</div>
Access this source to play around with these code snipet and view detail: