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

Question

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>

What do you mean "hide the child behind the parent"? I mean, setting `display: none` on the child would hide it, irrespective of its position relative to the parent. Please add more details to your question about exactly what you are trying to achieve. Please also show what attempts and research you've done. — Heretic Monkey, Jun 20 '18 at 01:32
@MikeMcCaughan I mean the child is under the parent on the z axis. And i will edit my question — Anatole Lucet, Jun 20 '18 at 01:39
@MikeMcCaughan Edited, i hope you will understand my question (my english is not very good). — Anatole Lucet, Jun 20 '18 at 01:50

score 1 · Accepted Answer · answered Jun 20 '18 at 01:51

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>

answered Jun 20 '18 at 01:51

davecar21

2,606
21
33

thank you, it fixed my problem. – Anatole Lucet Jun 20 '18 at 01:59
@Crayzzit Glad to help. – davecar21 Jun 20 '18 at 02:10

score 1 · Answer 2 · answered Jun 20 '18 at 01:51

1

Try again with position: relative;

answered Jun 20 '18 at 01:51

TranDuc

23
1
10

score 1 · Answer 3 · answered Jun 20 '18 at 01:57

1

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.

answered Jun 20 '18 at 01:57

Auroratide

2,299
10
15

Good point @Auroratide. – davecar21 Jun 20 '18 at 02:21

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

3 Answers3