Make child div in back of parent div with z-index?

Question

No matter what I try, the child div is always in front of the parent. Is there a way to make the child div in back of the parent? z-index doesn't seem to work.

Notes :

I don't want to change the html
parent must have a z-index
duplicate "How to make child element upper than parent with z-index" doesn't make grammatical sense and is hard to read, and didn't really help me.

<div id='parent'>
    <div id='child'>
    </div>
</div>

#parent {
    width:50px;
    height:50px;
    background:red;
    position:absolute;  
    z-index:100;
}

#child {
    width:50px;
    height:50px;
    background:blue;
    position:absolute;  
    z-index:-100;
}

JSFiddle

Remove the z-index on the parent. http://jsfiddle.net/j08691/j6e9qho3/2/ — j08691, Apr 13 '15 at 03:03
within the context of my program, the parent must have a z-index — Shai UI, Apr 13 '15 at 03:04
`z-index` will not work for this since child elements inherit the `z-index` of their parent, after that they apply their own `zindex`. So z-index in this case will let all the child elements compete however will not allow them to leave their parent element. Here is what I mean : http://jsfiddle.net/nvLyacje/1/ If you could give more context to your constraints maybe we could find a work around — Alexei Darmin, Apr 13 '15 at 03:09
Also, duplicate of this: http://stackoverflow.com/questions/16057361/how-to-make-child-element-upper-than-parent-with-z-index — Alexei Darmin, Apr 13 '15 at 03:13
what's your specify problem it is? I think your model about **z-index** is not match the situation. — Todd Mark, Apr 13 '15 at 03:21

score 0 · Answer 1 · answered Apr 13 '15 at 03:12

0

Don't make the child div actually contained in the parent. Since the positions are absolute you can do this:

<div id='parent'>
</div>
<div id='child'>
</div>

Now if the z-index of parent is less than that of child it will appear on top.

answered Apr 13 '15 at 03:12

Always Learning

5,510
2
17
34

score 0 · Answer 2 · answered Apr 13 '15 at 03:28

You can't achieve that because they are part of the same stacking context. However a workaround could be set opacity: 0 to child

#parent {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  z-index: 1;
}

#child {
  width: 50px;
  height: 50px;
  background: blue;
  position: absolute; 
  z-index: 2;
  opacity: 0;
}

<div id='parent'>
  <div id='child'></div>
</div>

score 0 · Answer 3 · answered Apr 13 '15 at 03:32

AFAIK it's not possible to position a parent on top of a child. Without changing the HTML you can however use:before or :after to create a new element and position that on top of the child;

#parent:after {
    background: red;
    content: "ON TOP";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

http://jsfiddle.net/j6e9qho3/12/

Edit: Or seeing as the effect of the parent being on top of the child is that the child isn't visible at all, the easiest thing to do is probably #child {display: none}. But I assume that doesn't work for you for other reasons.

Perhaps if you explained what you want to accomplish we could be of more help.

score 0 · Answer 4 · answered Apr 13 '15 at 03:42

I was able to achieve what I wanted by dealing with siblings inside the parent...

<div id='parent'>

    <div id='child1'>
    </div>

    <div id='child2'>
    </div>
</div>

where parent is a transparent container with its own z-index, but the children are the actual color squares that are drawn (each with their own z-index).

Make child div in back of parent div with z-index?

4 Answers4