css - 当父级(级别 2)溢出隐藏时，使绝对定位的子元素可见

Question

当父(级别 2)元素的溢出属性设置为隐藏时，我想让内部绝对定位元素可见。

附言:z-index 不起作用

代码笔:http://codepen.io/mstoic/pen/gpqVKo?editors=110

.parent {
  overflow: hidden;
  width: 5em;
  height: 5em;
  margin: 5em;
  background: #6c3;
  display: block;
}
.child {
  position: relative;
}
p {
  position: absolute;
  top: 0;
  left: -2em;
  z-index: 999;
}

<div class="parent">
  <div class="child">
    <p>Some Text</p>
  </div>
</div>

Answer 1

我建议将父级分成 2 个 div，一个用于存储要裁剪的元素，一个用于存储要重叠的元素。

HTML

<div class="parent">    
    <div class="parent-wrapper">
        <!-- Put elements you want cropped in here -->
    </div>
    <div class="child">
        <!-- Put elements you don't want cropped in here -->
        <p>Some Text</p>
    </div>      
</div>

CSS

.parent {

    width: 5em;
    height: 5em;
    margin: 5em;
    background: #6c3;
    display: block;
}
.parent-wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.child {
    position: relative;
}

p {
    position: absolute;
    top:0;
    left: -2em;
    z-index: 999;
}

CodePen