css - 如何绝对容器内的元素溢出 :hidden not be cropped

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

但是我的关闭图标因为overflow:hidden明显被父级裁剪掉了，但是我无法设置overflow:visible，因为页面上出现了滚动条。

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

在此先感谢您，我们将不胜感激。

注意:它与 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; }