Question

当父（level-2）元素的overflow属性设置为hidden时，我想让内部绝对定位元素可见。

P.S。：z-index不起作用

Codepen：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

Answer 2

如果父级位于静态位置，如果您将位置绝对设置为子级，则它将从流中移除：

section {
  height: 100px;
  width: 100px;
  background-color: orange;
  overflow: hidden;
}
span {
  position: absolute;
  top: 200px;
}

<section>
  <div>
    <span>hello</span>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
</section>

当父级（级别2）溢出隐藏时，使绝对定位的子元素可见

2 个答案: