Try this:
You should use top: 6rem; I see you have more than what you expect. also I used #bronze-price selector to define the code.
.flex-container {
display: flex;
flex-direction: column;
width: 100%;
align-items: flex-start;
height: inherit;
justify-content: center;
}
.flex-container * {
align-self: center;
}
.flex-container .second-container {
display: flex;
flex-direction: row;
max-width: 100%;
height: 20vh;
margin-bottom: 5rem;
}
.second-container>div {
width: 200px;
height: 200px;
margin: 3rem;
background-size: 150px, 150px;
background-repeat: no-repeat;
background-position: center;
z-index: 3;
border:2px solid black;
}
.second-container>div .price-container {
height: 40px;
width: 200px;
border-radius: 8px;
position: relative;
top: 6rem;
margin: 0 auto;
z-index: -1;
}
#bronze-price {
border: 5px solid #BE5A06;
display:inline-block;
z-index:0;
}
#bronze {
background: orange
}
<div class="flex-container">
<div class="second-container">
<div id="bronze">
<div class="price-container" id="bronze-price"></div>
</div>
</div>
</div>
So, I have a parent element with id #bronze and a children element of class .price-container. What I want to do is to have the children element overlaping the parent element, meaning that its z coordinate should be higher. However it seems like z-index is being completely ignored even though, the element is relatively positioned.
Why is the z-index not working in this case?
Thanks
.flex-container {
display: flex;
flex-direction: column;
width: 100%;
align-items: flex-start;
height: inherit;
justify-content: center;
}
.flex-container * {
align-self: center;
}
.flex-container .second-container {
display: flex;
flex-direction: row;
max-width: 100%;
height: 20vh;
margin-bottom: 5rem;
}
.second-container>div {
width: 200px;
height: 200px;
margin: 3rem;
background-size: 150px, 150px;
background-repeat: no-repeat;
background-position: center;
z-index: 3;
}
.second-container>div .price-container {
height: 40px;
width: 200px;
border-radius: 8px;
position: relative;
top: 12rem;
margin: 0 auto;
z-index: 0;
}
#bronze-price {
border: 2px solid #BE5A06;
}
#bronze {
background: orange
}
<div class="flex-container">
<div class="second-container">
<div id="bronze">
<div class="price-container" id="bronze-price"></div>
</div>
</div>
</div>
it would be good to at least hightlight what did you do. Actually it’s hard (even impossible) to find what you did
