Geek Answers Handbook

Z-index issue: stack child over parent container

I have a situation where there are 2 children in the parent container. The first child occupies the entire contents of the parent container. The other child should be below the parent container. It is currently displayed on top of the parent. I am trying to lay the second child behind the parent container.

Is it possible to do this. If so, how do I approach the solution.

Note. I cannot get rid of the z-indexparent container as it is modal in this case

HTML

 <div class="parent">
    <h1>Parent</h1>
      <code>position: absolute;<br/>
      z-index: 1;</code>

    <div class="outer-child">
    <br/><br/><br/><br/><br/>
        <h1>Outer Child</h1>
        <code>position: relative;<br/>
        z-index: 1;</code>
    </div>

    <div class="child">

        <h1>Child</h1>
        <code>position: absolute;<br/>
        z-index: -1;</code>
    </div>
</div>

CSS

 html {
    padding: 20px;
    font: 12px/20px Arial, sans-serif;
}

div {
    opacity: 0.7;
    position: relative;
}

.parent {
    z-index: 1;
    opacity: 1;
    position: absolute;
    top: 40px;
    left: 100px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #fdd;
    padding: 40px 20px 20px;
    height: 200px;
}

.child {
    z-index: -1;
    position: absolute;
    top: 10px;
    left: 260px;
    width: 150px;
    height: 110px;
    border: 1px dashed #009;
    padding-top: 125px;
    background-color: #ddf;
    text-align: center;
}

.outer-child {
    z-index: 1;
    opacity: 0.8;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #ffc;
    padding: 20px 10px 10px;
    height: 200px;
}

Jsfiddle

+4
source share
3 answers

z-index initial

html {
    padding: 20px;
    font: 12px/20px Arial, sans-serif;
}

div {
    opacity: 0.7;
    position: relative;
}

.parent {
    z-index: initial;
    opacity: 1;
    position: absolute;
    top: 40px;
    left: 100px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #fdd;
    padding: 40px 20px 20px;
    height: 200px;
}

.child {
    z-index: -1;
    position: absolute;
    top: 10px;
    left: 260px;
    width: 150px;
    height: 110px;
    border: 1px dashed #009;
    padding-top: 125px;
    background-color: #ddf;
    text-align: center;
}

https://jsfiddle.net/3269rjqh/1/

+2

z-, , z- "" ( z). z-index , HTML.

0

html {
    padding: 20px;
    font: 12px/20px Arial, sans-serif;
}

div {
    opacity: 0.7;
    position: relative;
}

.parent {
    z-index: 1;
    opacity: 1;
    position: absolute;
    top: 40px;
    left: 100px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #fdd;
    padding: 40px 20px 20px;
    height: 200px;
}

.child {
    z-index: -1;
    position: absolute;
    top: 10px;
    left: 260px;
    width: 150px;
    height: 110px;
    border: 1px dashed #009;
    padding-top: 125px;
    background-color: #ddf;
    text-align: center;
}
<div class="parent">
    <h1>Parent</h1>
      <code>position: absolute;<br/>
      z-index: 1;</code>
</div>
<div class="child">
        <h1>Child</h1>
        <code>position: absolute;<br/>
        z-index: -1;</code>
</div>
Run codeHide result
0
source

More articles:


All Articles