6
我使用了這個page中概述的等高CSS技巧。避免當元素在「overflow：hidden」元素內時被截斷
直到今天，這一切都工作正常，當我需要添加一個對話框內的一列，這是絕對定位，把它從流中。問題是，由於容器上有「溢出：隱藏」，當溢出時對話將被切斷。
除了在容器元素外部引入對話之外，是否有任何可能的方式讓它通過CSS顯示？
下面是一個小例子，演示了我提到過的內容。
<style>
.container { overflow: hidden; margin-top: 30px }
.col {
float: left;
padding-bottom: 2000px;
margin-bottom: -2000px;
border-right: 1px solid black;
width: 100px;
background-color: grey;
}
.col.third { border-right: none }
#div-a { position: relative }
#div-b {
position: absolute;
background-color: red;
width: 35px;
height: 350px;
bottom: 0;
right: 0;
margin: 5px;
border: 2px solid black;
}
</style>
<div class="container">
<div class="col first">
<p style="height: 100px">One</p>
</div>
<div class="col second">
<p style="height: 300px">Two</p>
<div id="div-a">
<!-- this gets cut off by the "overflow: hidden" on div.container -->
<div id="div-b">
Foo
</div>
</div>
</div>
<div class="col third">
<p style="height: 200px">Three</p>
</div>
</div>
你看到div#div-b在頂部時，它在div.container元素溢出切斷。