Stacking Elements Along the Z-Axis in CSS
In this lesson we will look at the overlapping of elements along the Z axis. By default, if two elements overlap each other, the element that is lower in the HTML code will be higher.
Let's look at an example. Let's say we have two elements absolutely positioned to overlap each other. In this case, the element that comes below in the HTML code will be higher:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background: #ff8888;
}
#elem2 {
position: absolute;
top: 60px;
left: 60px;
width: 100px;
height: 100px;
background: #7e89eb;
}
:
