在经典的模式框中,我有这样的东西:
<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 不同另一个问题,因为父元素是绝对定位的,而不是相对定位的!
最佳答案
是的,但不是这样。您需要将 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; }
关于css - 如何绝对容器内的元素溢出 :hidden not be cropped,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8974114/