6
私は、このpageに概説されている等高線CSSトリックを使用しています。要素が "overflow：hidden"要素内にあるときに要素が切断されるのを避ける
今日まで、流れの中から抜け出すために絶対的に配置されている列の1つの中にダイアログボックスを追加する必要があるときまで、すべてうまくいきました。問題は、コンテナに「オーバーフロー：非表示」があるため、オーバーフロー時にダイアログが切断されていることです。
ダイアログボックスをコンテナ要素の外に持ってくるのとは別に、CSSを使って表示する方法はありますか？
ここに私が言及したことを示す小さな例があります。あなたはそれがdiv.container要素に溢れたときdiv#div-bが上部で切断されていることがわかり
<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>
。