I am encountering an issue with the code provided below, which is a simplified version of a larger problem.
Can you explain why, if:
.div_A {z-index: 10;} < .div_C {z-index: 20;}
the button inside div_C appears behind div_A?
I need to understand the specific reason so I can apply the solution accurately to my main issue.
If possible, please provide the corrected code (with minimal changes) as it would be greatly appreciated.
.button {
display: inline-block;
color: #fff !important;
background-color: #be1e2d;
text-decoration: none;
padding: 10px 23px;
}
.div_A {
display: inline-block;
position: absolute;
top: -100px;
z-index: 10;
}
.div_B {
position: relative;
display: inline-block;
width: 400px;
height: 400px;
background-color: #aaf;
opacity: 0.9;
}
.div_C {
text-align: center;
z-index: 20;
}<div>
<div class="div_A">
<div class="div_B"></div>
</div>
<div class="div_C">
<a href="#" class="button" style="">TRY TO CLICK ME!</a>
</div>
</div>Thank you!