I have a good understanding of z-index and decided to practice with it by writing the following code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #141214;
}
.card{
/* position: relative; */
width: 350px;
height: 450px;
background-color: #282729;
border-radius: 15px;
z-index: 1; }
.img{
position: relative;
width: 80%;
background-color: #AAA;
/* z-index: 1; */
}
.img::before{
position: absolute;
content: '';
left: -70%;
top: 10%;
width: 350px;
height: 350px;
background-color: #9BDB23;
z-index: -1;
}
img{
max-width: 100%;
}<div class="card">
<div class="img">
<img src="shoes.png" alt="A Shoe">
</div>
<div class="content">
<h3>Nike Shoes</h3>
<div class="size">
<p>size</p>
<a href="#" class="size">7</a>
<a href="#" class="size">8</a>
<a href="#" class="size">9</a>
<a href="#" class="size">10</a>
</div>
<div class="color">
<p>color</p>
<div class="color green"></div>
<div class="color blue"></div>
<div class="color red"></div>
</div>
<a href="#" class="buy">buy now</a>
</div>
</div>Currently, I am facing several challenges with regards to z-index in this code snippet: (1) When img::before is given a z-index of -1, it appears behind .card instead of .img (I expected it to be placed behind its immediate parent container according to standard behavior). (2) When both img::before and .card are assigned z-index values (-1 for img::before and 1 for .card), img::before ends up behind both .img and .content. (3) If img::before has a z-index of -1, .card has a z-index of 1, and .img also has a z-index of 1 (optional), then img::before is positioned beneath .img but above .card.
There seem to be various combinations of z-indexes that are causing confusion for me in this scenario. Can anyone provide assistance in resolving this issue?