如何使用'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 （可以超出容器边界）。

这种方法有效地允许您在容器中包含元素Overflow:hidden 可以突出到其边界之外，为您的布局和设计提供更大的灵活性。

以上是如何使用'overflow:hidden”允许元素溢出容器？的详细内容。更多信息请关注PHP中文网其他相关文章！