How to get a parent element to appear above child

user_118547 0
Viewed 121119

I have two nested CSS elements. I need to get the parent to be on top, that is, above in z-axis, of the child element. Just setting z-index is not sufficient.

I can't set a negative z-index on the child, that'll set it to below the page container on my actual page. Is this the only method?

http://jsbin.com/ovafo/edit

.parent {
  position:  relative;
  width: 750px;
  height: 7150px;
  background: red;
  border: solid 1px #000;
  z-index: 1;
}
.child {
  position: absolute;
  background-color: blue;
  z-index: 0;
  color: white;
  top: 0;
}
.wrapper
{
  position: relative;
  background: green;
  z-index: 10;
}
<div class="wrapper">
  <div class="parent">
    parent parent
    <div class="child">
      child child child
    </div>
  </div>
</div>

z-index css
7 Answers

Fortunately a solution exists. You must add a wrapper for parent and change z-index of this wrapper for example 10, and set z-index for child to -1:

.parent {
    position: relative;
    width: 750px;
    height: 7150px;
    background: red;
    border: solid 1px #000;
    z-index: initial;
}

.child {
    position: relative;
    background-color: blue;
    z-index: -1;
    color: white;
}

.wrapper {
    position: relative;
    background: green;
    z-index: 10;
}
<div class="wrapper">
    <div class="parent">parent parent
        <div class="child">child child child</div>
    </div>
</div>

user_666210
Related