Parent above child on the z-axis in css / html [duplicate] - html

Question

This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 4 years ago.
I have a div (the parent) and another div in the parent (the child) and I want to hide the child behind the parent.
edit : I will try to explain better, so i speak about the z axis but if i do something like :
.parent {
z-index: 10;
}
.child {
z-index: 0;
}
it's not working. So i ask you the question : how my child can be under my parent on the z axis ?
.parent {
width: 200px; height: 200px;
background-color: red;
}
.child {
width: 100px; height: 100px;
background-color: blue;
}
<div class="parent">
<div class="child"></div>
</div>

Answer 1

If you will use z-index.
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
.parent {
background-color: red;
height:100px;
width:100px;
}
.child {
background-color: blue;
height:50px;
width:50px;
position:relative;
z-index: -1;
}
<div class="parent">
<div class="child"></div>
</div>

Answer 2

Try again with position: relative;

Answer 3

davecar21 beat me to it, but basically the child needs to be position: relative with z-index: -1.
However, I would like to add that positioning the child behind its parent feels like an antipattern. To me, z-indexing represents layering between siblings, so if possible, I would recommend restructuring your approach such that the parent-child elements are actually adjacent siblings, perhaps nested in some containing element.