绝对定位的元素（position: absolute）超出设有属

先看代码：

// html
<div class='a'>
    <div class="b">
       <div class="c"></div>
    </div>
</div>

// css
.a {
  height: 200px;
  width: 300px;
  border: 1px solid #ccc;
  overflow: hidden; 
}

.b {
  position: relative;
}

.c {
  width: 100px;
  height: 400px;
  background: red;
  position: absolute;
}

1.png

c 元素 的高度比 a 元素的高度高，c 元素 的定位也是绝对定位，可以看出红色的块 c 元素 超出 a 元素的部分被隐藏了。
而我想要的是超出部分可以继续显示。

我们都知道具有绝对定位的元素 是相对于其具有定位的父节点offsetParent（relative， absolute， fixed） 进行定位的，当没有定位的父级节点。

而上面的代码中 c 元素 相对于具有相对定位的父元素 b 元素 进行定位的，b 元素 是相对定位，所以没有脱离文档流，依然还在 a 元素 里占据位置，猜想这就是为啥被隐藏的原因。

.b{
  // position: relative;
}

2.png

当把 b 元素的相对定位去掉后, 超出部分就可以不被隐藏了， 因为此时 c 元素是相对body 来定位的。

或者

.b{
  position: absolute;
}

给 b 元素换成绝对定位absolute，一样也可以实现，这样 c 元素相对 b 元素定位， 而 b 元素脱离了文档流 相对于 body 定位， 就不受 a 元素的影响了。

3.png

完。