CSS：如何让position:absolute div在position:relative div中不会被容器上的overflow:hidden裁剪
我有 3 个级别的 div：
- （下面的绿色） 顶级
div与overflow:hidden。这是因为我希望该框中的某些内容（此处未显示）在超出框的大小时被裁剪。 - （下面的红色部分） 在这个里面，我有
div和position:relative。其唯一用途是用于下一个级别。 - （下面的蓝色） 最后一个
div我用position:absolute从流程中取出，但我想相对于红色进行定位>div（不是页面）。
我希望将蓝色框从流程中取出并扩展到绿色框之外，但相对于红色框定位，如下所示：
但是，使用下面的代码，我得到：
并删除 position:relative 在红色框上，现在蓝色框可以离开绿色框，但不再相对于红色框定位：
有没有办法：
- 将
overflow:hidden保留在绿色框上。 - 蓝色框是否扩展到绿色框之外并相对于红色框定位？
完整来源：
#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;
}<br/><br/><br/>
<div id="d1" >
<div id="d2" >
<div id="d3"></div>
</div>
</div>I have 3 levels of div:
- (In green below) A top level
divwithoverflow: hidden. This is because I want some content (not shown here) inside that box to cropped if it exceeds the size of the box. - (In red below) Inside this, I have
divwithposition: relative. The only use for this is for the next level. - (In blue below) Finally a
divI take out of the flow withposition: absolutebut that I want positioned relative to the reddiv(not to the page).
I'd like to have the blue box be taken out of the flow and expand beyond the green box, but be positioned relative to the red box as in:
However, with the code below, I get:
And removing the position: relative on the red box, now the blue box is allowed to get out of the green box, but is not positioned anymore relative to the red box:
Is there a way to:
- Keep the
overflow: hiddenon the green box. - Have the blue box expand beyond the green box and be positioned relative to red box?
The full source:
#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;
}<br/><br/><br/>
<div id="d1" >
<div id="d2" >
<div id="d3"></div>
</div>
</div>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
一个有效的技巧是使用
position:absolute而不是position:relative定位框 #2。当我们想要使用position:absolute定位内框（此处为框 #3）时，我们通常会在外框（此处为框 #2）上放置一个position:relative相对于外盒。但请记住：要使框 #3 相对于框 #2 定位，只需定位框 #2 即可。通过此更改，我们得到：以下是此更改的完整代码：
A trick that works is to position box #2 with
position: absoluteinstead ofposition: relative. We usually put aposition: relativeon an outer box (here box #2) when we want an inner box (here box #3) withposition: absoluteto be positioned relative to the outer box. But remember: for box #3 to be positioned relative to box #2, box #2 just need to be positioned. With this change, we get:And here is the full code with this change:
没有什么神奇的解决方案可以在溢出隐藏容器之外显示某些内容。
通过将绝对定位的 div 放置在当前相对容器内（您不希望剪切的 div 应该位于此 div 之外），使其与其父级的大小相匹配，可以实现类似的效果：
请记住，如果您只需要剪切 x 轴上的内容（这似乎是您的情况，因为您只设置了 div 的宽度），您可以使用
overflow-x:hidden。There's no magical solution of displaying something outside an overflow hidden container.
A similar effect can be achieved by having an absolute positioned div that matches the size of its parent by positioning it inside your current relative container (the div you don't wish to clip should be outside this div):
Take in mind that if you only have to clip content on the x axis (which appears to be your case, as you only have set the div's width), you can use
overflow-x: hidden.我真的没有找到按原样执行此操作的方法。我认为您可能需要从 div#1 中删除
overflow:hidden并在 div#1 中添加另一个 div（即作为 div#2 的同级）来保存未指定的“内容”并添加overflow:hidden改为它。我不认为溢出可以（或应该能够）被覆盖。I don't really see a way to do this as-is. I think you might need to remove the
overflow:hiddenfrom div#1 and add another div within div#1 (ie as a sibling to div#2) to hold your unspecified 'content' and add theoverflow:hiddento that instead. I don't think that overflow can be (or should be able to be) over-ridden.如果外层 div（绿色框）内未显示其他内容，为什么不将该内容包装在另一个 div 内，我们将其称为
“内容”。在这个新的内部 div 上隐藏溢出，但在绿色框中保持溢出可见。唯一的问题是，您将不得不搞乱以确保内容 div 不会干扰红色框的位置，但听起来您应该能够轻松解决这个问题。
If there is other content not being shown inside the outer-div (the green box), why not have that content wrapped inside another div, let's call it
"content". Have overflow hidden on this new inner-div, but keep overflow visible on the green box.The only catch is that you will then have to mess around to make sure that the content div doesn't interfere with the positioning of the red box, but it sounds like you should be able to fix that with little headache.