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

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 之外，并将溢出属性设置为隐藏：

<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; }