xxxxxxxxxx
Child with z-index 9999 and parent z-index of 3 will lose to a child with z-index 1 and parent with z-index of 4
xxxxxxxxxx
z-index => allows you to LAYER your components
z-index: 2147483638 is the maximun "height" you can give your component
otherwise it will not work
xxxxxxxxxx
#blue {
background-color: blue;
z-index: 3;
}
#red {
background-color: red;
z-index: 2;
}
#green {
background-color: green;
z-index: 1;
}
xxxxxxxxxx
/* The z-index property specifies the stack order of an element. */
.z-index {
z-index: -1;
}
xxxxxxxxxx
What is z-index? z-index is the CSS property that controls the stacking order of overlapping elements on a page. An element with a higher z-index value will appear in front of an element with a lower z-index value. The property is called “z-index” because it sets the order of elements along the z-axis.
xxxxxxxxxx
You can do this, but only if the parent doesn't have a
position: relative or absolute property on it.
So if you remove the position: absolute from the
first div, it'll work as expected.
xxxxxxxxxx
<div class="wrapper">
<div class="dashed-box">Dashed box</div>
<div class="gold-box">Gold box</div>
<div class="green-box">Green box</div>
</div>