CSS:如何获得位置:位置内的绝对div:相对div不会被溢出裁剪:隐藏在容器上
ave*_*net 133 css css-position overflow
我有3个级别div:
- (在下面绿色)的顶层
div与overflow: hidden.这是因为如果超过框的大小,我希望在该框内部的一些内容(此处未显示)被裁剪. - (在下面红色的)这里面,我也
div有position: relative.唯一的用途是下一级别. - (下面的蓝色)最后一个
div我取出了流程,position: absolute但我想要相对于红色div(而不是页面)定位.
我想将蓝色框从流中取出并扩展到绿色框之外,但相对于红色框定位如下:
但是,通过下面的代码,我得到:
然后移除position: relative红色框,现在蓝色框允许离开绿色框,但相对于红色框不再定位:
有办法:
- 保持
overflow: hidden在绿色框上. - 蓝色框是否扩展到绿色框之外并相对于红色框定位？
完整的源代码,为了测试而使用内联CSS:
#d1 {
overflow: hidden;
background: #efe;
padding: 5px;
width: 125px;
}
#d2 {
position: relative;
background: #fee;
padding: 2px;
width: 100px;
height: 100px;
}
#d3 {
position: absolute;
top: 10px;
background: #eef;
padding: 2px;
width: 75px;
height: 150px;
}ave*_*net 48
一个有效的技巧是用#position: absolute而不是位置框#2 position: relative.position: relative当我们想要一个position: absolute相对于外盒定位的内盒(这里是盒#3)时,我们通常在外盒(这里是盒子#2)上放一个.但要记住:对于方框#3相对于方框#2定位,方框#2只需要定位.通过此更改,我们得到:
以下是此更改的完整代码:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
/* Positioning */
#box1 { overflow: hidden }
#box2 { position: absolute }
#box3 { position: absolute; top: 10px }
/* Styling */
#box1 { background: #efe; padding: 5px; width: 125px }
#box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
#box3 { background: #eef; padding: 2px; width: 75px; height: 150px }
</style>
</head>
<body>
<br/><br/><br/>
<div id="box1">
<div id="box2">
<div id="box3"/>
</div>
</div>
</body>
</html>
我在溢出的框中的绝对定位框中添加了更多关于此的详细信息:自动或隐藏.
- 我实际上使用了`position:static`,这对我来说效果更好 (5认同)
- 想知道使用这样的颜色来解释如此直观的东西的目的是什么...... (3认同)
在溢出隐藏容器之外显示某些东西没有神奇的解决方案.
通过将绝对定位的div与其父级的大小匹配,可以通过将其放在当前相对容器中来实现类似的效果(您不希望剪切的div应该在此div之外):
#1 .mask {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
overflow: hidden;
}
请记住,如果您只需要在x轴上剪辑内容(这似乎是您的情况,因为您只设置了div的宽度),您可以使用overflow-x: hidden.