如何使用「overflow:hidden」允許元素溢出容器？

特定元素的容器溢位控制

您可能會遇到這樣的情況：您的容器具有特定的高度和寬度尺寸，並且溢出：隱藏到隱藏任何超出其邊界的元素。但是，您可能還想允許容器內的某些元素超出這些邊界。

要實現這一點，請採用將溢出：隱藏元素保持為位置：靜態並將溢出元素相對於更高的父級（而不是溢出：隱藏的父級）被證明是有效的。例如：

<code class="css">.relative-wrap {
    position: relative;
}

.overflow-wrap {
    height: 250px;
    width: 250px;
    overflow: hidden;
    background: lightblue;
}

.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: green;    
}

.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: red;
}</code>

<code class="html"><div class="relative-wrap">
    <div class="overflow-wrap">
        <div class="respect-overflow"></div>
        <div class="no-overflow"></div>
    </div>
</div></code>

在此範例中，.relative-wrap div 用作位置為：relative 的上級父級。在 .relative-wrap 中，.overflow-wrap div（帶有overflow:hidden）使用position:static定位。然後，溢出元素（在本例中為.respect-overflow 和.no-overflow）相對於.relative-wrap （它們的祖父元素）定位，使用.respect-overflow 的position:relative（尊重.overflow- 的邊界）對於.no-overflow，位置：絕對（wrap）和位置：絕對（可以超出容器邊界）。

這種方法有效地允許您在具有溢出：隱藏的容器中擁有元素，這些元素可以突出到其邊界之外，從而給出您的佈局和設計具有更大的靈活性。

以上是如何使用「overflow:hidden」允許元素溢出容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！