Question

在经典的模态框中，我有类似的东西：

<div id="container">

    <div id="content"></div>

    <div id="closeButton"></div>

</div>

这种风格：

#container { position: absolute; overflow: hidden; }
#closeButton { position: absolute; top: -10px; right: -10px; }

但我的关闭图标显然被父级裁剪，因为溢出：隐藏，但我无法设置溢出：可见因为滚动条出现在页面上。

那么，有没有办法让我的关闭按钮位于父母之外但没有被剪切？

提前非常感谢，任何帮助都会被贬低。

注意：它与this其他问题不同，因为父元素位于绝对位置，而不是相对位置！

Answer 1

是的，但不是这样。您需要将closeButton放在div之外，并将overflow属性设置为hidden：

<div id="container">
    <div id="content-container"><div id="content"></div></div>
    <div id="closeButton"></div>
</div>

风格：

#container { position: relative; /* or absolute */ overflow: visible; }
#content-container { overflow: hidden; }
#closeButton { position: absolute; top: -10px; right: -10px; }

如何在具有溢出的绝对容器内的绝对元素：隐藏不被裁剪

1 个答案: