我有一个div元素包装其他div元素,如:
<div style="overflow:hidden"><div id="a"></div><div id="b"></div></div>
我有其他css规则管理外部div的维度.在我的实际代码中,我想要将div#定位在外部div以外的10像素.但是,我想让div#b仍然被外部div的overflow:hidden所切断.
实现这一目标的最好方法是什么?
解决方法@H_301_10@
方法1
一个很好的方式是通过将溢出元素设置为position:fixed(这将使其忽略父级溢出),然后使用此技术将其相对于父级定位:
.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}
一个警告是,您不能在固定元素上设置任何顶部,右侧,左侧和底部属性(它们都必须为默认值’auto’).如果您需要稍微调整位置,可以使用正/负边距来改变.
方法2
最近发现的另一个技巧是保持overflow:hidden元素的位置为static,并将覆盖元素相对于较高的父(而不是overflow:hidden parent)定位.像这样:
一个很好的方式是通过将溢出元素设置为position:fixed(这将使其忽略父级溢出),然后使用此技术将其相对于父级定位:
.parent { position: relative; .fixed-wrapper { position: absolute; .fixed { position: fixed; } } }
一个警告是,您不能在固定元素上设置任何顶部,右侧,左侧和底部属性(它们都必须为默认值’auto’).如果您需要稍微调整位置,可以使用正/负边距来改变.
方法2
最近发现的另一个技巧是保持overflow:hidden元素的位置为static,并将覆盖元素相对于较高的父(而不是overflow:hidden parent)定位.像这样: