我有一个 div 元素包装其他 div 元素,如下所示:
<div style="overflow:hidden">
<div id="a"></div>
<div id="b"></div>
</div>
我还有其他管理外部 div 尺寸的 CSS 规则。在我的实际代码中,我想将 div#a 定位在外部 div 下方 10 px 处。但是,我希望 div#b 仍然被外部 div 的溢出:隐藏。
实现这一目标的最佳方法是什么?
方法一
一个好的方法是将溢出元素设置为position:fixed
(这将使其忽略父溢出),然后使用以下技术将其相对于父元素定位:
.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}
一个警告是,您不能在固定元素上设置任何顶部、右侧、左侧、底部属性(它们必须都是默认的“自动”)。如果您需要稍微调整位置,您可以使用正/负边距来代替。
方法二
我最近发现的另一个技巧是保持overflow:hidden
元素position:static
并相对于更高的父级(而不是overflow:hidden
父级)定位覆盖元素。像这样:
#wrapper {
width: 400px;
height: 50px;
position: relative;
z-index: 1000;
left: 0px;
top: 0px;
}
#wrapper #insideDiv {
width: 400px;
height: 50px;
overflow: hidden;
position: absolute;
z-index: 2000;
left: 0px;
top: 0px;
}
#wrapper #a {
position: absolute;
height: 30px;
width: 100px;
bottom: -40px;
z-index: 1000;
left: 0px;
}
<div id="wrapper">
<div id="a">AAA</div>
<div id="insideDiv">
<div id="b">BBB</div>
</div>
</div>
正如人们所说,元素必须在父级之外呈现,以免被裁剪。但是您可以使用 JavaScript 来实现类似的概念,而无需更改您的实际标记:
function breakOverflow(elm) {
var top = elm.offset().top;
var left = elm.offset().left;
elm.appendTo($('body'));
elm.css({
position: 'absolute',
left: left+'px',
top: top+'px',
bottom: 'auto',
right: 'auto',
'z-index': 10000
});
}
然后传递要从其父项的裁剪中排除的元素:
breakOverflow($('#exlude-me'));