先看代碼:
// 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 元素的部分被隱藏了。
而我想要的是超出部分可以繼續(xù)顯示成玫。
我們都知道具有絕對定位的元素 是相對于其具有定位的父節(jié)點offsetParent
(relative
加酵, absolute
, fixed) 進行定位的哭当,當沒有定位的父級節(jié)點猪腕。
而上面的代碼中 c 元素 相對于具有相對定位的父元素 b 元素 進行定位的,b 元素 是相對定位钦勘,所以沒有脫離文檔流陋葡,依然還在 a 元素 里占據(jù)位置,猜想這就是為啥被隱藏的原因彻采。
.b{
// position: relative;
}
2.png
當把 b 元素的相對定位去掉后, 超出部分就可以不被隱藏了腐缤, 因為此時 c 元素是相對body 來定位的。
或者
.b{
position: absolute;
}
給 b 元素換成絕對定位absolute
颊亮,一樣也可以實現(xiàn)柴梆,這樣 c 元素相對 b 元素定位, 而 b 元素脫離了文檔流 相對于 body
定位终惑, 就不受 a 元素的影響了。
3.png
完门扇。