如何使父元素出现在子元素上方 [英] How to get a parent element to appear above child

问题描述

我有两个嵌套的CSS元素.我需要使父级位于子元素的顶部，即z轴上方.仅设置z-index是不够的.

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.

我不能在子级上设置负Z索引，而是将其设置为我实际页面上的页面容器下方.这是唯一的方法吗?

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，并删除父级上的一组.

Set a negative z-index for the child, and remove the one set on the parent.

.parent {
    position: relative;
    width: 350px;
    height: 150px;
    background: red;
    border: solid 1px #000;
}
.parent2 {
    position: relative;
    width: 350px;
    height: 40px;
    background: red;
    border: solid 1px #000;
}
.child {
    position: relative;
    background-color: blue;
    height: 200px;
}
.wrapper {
    position: relative;
    background: green;
    height: 350px;
}

<div class="wrapper">
    <div class="parent">parent 1 parent 1
        <div class="child">child child child</div>
    </div>
    <div class="parent2">parent 2 parent 2
    </div>
</div>

https://jsfiddle.net/uov5h84f/

这篇关于如何使父元素出现在子元素上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！