Problem with changing order of elements in html/css [duplicate] - html

Question

This question already has answers here:
I have position but z index is not working
(1 answer)
How to get a parent element to appear above child [duplicate]
(7 answers)
Closed 4 years ago.
I have two elements as parent and child and I want to make the child element to go behind the parent element. I try to add z-index:-1 to child element but nothing happens ... can someone guide me on how to make the child go behind parent element.
.parent {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: coral;
color: white;
font-size: 25px;
text-align: center;
line-height: 200px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.child {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: silver;
z-index: -1;
}
<div class="parent">
parent
<div class="child">child</div>
</div>

Answer 1

The problem here is that when you set a transform property other than none, you define a new stacking context in CSS. Removing this property fixes the issue. 1.
.parent {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: coral;
color: white;
font-size: 25px;
text-align: center;
line-height: 200px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
/* transform: translate(-50%, -50%);
*/
}
.child {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: silver;
z-index: -1;
}
<div class="parent">parent
<div class="child">child</div>
<div>

Answer 2

At this moment, you can't do this. But what you can do is, give the styles of parent to the ::before pseudo element and you can get it done:
.parent {
width: 200px;
height: 200px;
color: white;
font-size: 25px;
text-align: center;
line-height: 200px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-indent: -99em;
}
.parent::before {
content: 'parent';
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: coral;
color: white;
font-size: 25px;
text-align: center;
line-height: 200px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.child {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: silver;
z-index: -1;
}
<div class="parent">
parent
<div class="child">child</div>
</div>

Answer 3

You can't do that, because the child is wrapped in the parent.
You can only swap parents with parents, and childs with childs. But but not parents with childs!
I would recommend to do stuff like this, like swaping parents with parents, via flex-box order.
Idk if it's allowed to share links but this tutorials here are pretty good and helped me a lot. I'm also a beginner
https://youtu.be/JJSoEo8JSnc
https://www.w3schools.com/css/css3_flexbox.asp
edit Okay you can do that, look at the other answer. But for me it's not a clean way to swap parents with childs. I'd avoid to do it.

Answer 4

Put the parent text in a div also
.parent {
width: 200px;
height: 200px;
color: white;
font-size: 25px;
text-align: center;
line-height: 200px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.parent-text {
border-radius: 50%;
background-color: coral;
z-index: 1;
top: 1px;
left: 1px;
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: silver;
z-index: -100;
}
<div class="parent">
<div class="parent-text">parent</div>
<div class="child">child</div>
</div>