絕對定位與隱藏溢出
P粉451614834
2023-08-21 19:30:21
<p>我們有兩個DIV，一個嵌套在另一個裡面。如果外部DIV沒有設定為絕對定位，那麼絕對定位的內部DIV將不會遵循外部DIV的溢出隱藏。 </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#first {
width: 200px;
height: 200px;
background-color: green;
overflow: hidden;
}
#second {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 250px;
top: 250px;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="first">
<div id="second"></div>
<div id="third"></div>
</div></pre>
<p><br /></p>
<p>有沒有辦法讓內部DIV遵循外部DIV的溢出隱藏，而不設定外部DIV為絕對定位（因為這會破壞我們的整體佈局）？
同時，對於我們的內部DIV來說，相對定位也不是一個選項，因為我們需要「突出顯示」一個表格TD。 </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#first {
width: 200px;
height: 200px;
background-color: green;
}
#second {
width: 50px;
height: 400px;
background-color: red;
position: relative;
left: 0px;
top: 0px;
}</pre>
<pre class="brush:html;toolbar:false;"><table id="first">
<tr>
<td>
<div id="second"></div>
</td>
</tr>
</table></pre>
<p><br /></p>
<p>還有其他選項嗎？ </p>
關於外部div使用
position: relative呢？在隱藏內部div的例子中。由於沒有指定top或left，它也不會在佈局中移動。將外部的
<div>設定為position: relative，內部的<div>設定為position: absolute。這樣應該適用於您。