CSS：如何在位置中放置位置：绝对div：相对div不会被溢出裁剪：隐藏在容器上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2243245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
提问by avernet
I have 3 levels of div:
我有 3 个级别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).
- （在下面绿色）的顶层
div与overflow: hidden。这是因为我希望该框中的某些内容（此处未显示）在超出框的大小时被裁剪。 - （在下面红色）这里面，我也
div有position: relative。唯一的用途是用于下一个级别。 - （下面的蓝色）最后一个
div我从流中取出，position: absolute但我想相对于红色div（而不是页面）定位。
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: relativeon 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:
并移除position: relative红色框上的 ，现在允许蓝色框脱离绿色框，但不再相对于红色框定位：
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?
- 保留
overflow: hidden在绿色框上。 - 蓝框是否扩展到绿框之外并相对于红框定位？
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>采纳答案by avernet
A trick that works is to position box #2 with position: absoluteinstead of position: relative. We usually put a position: relativeon an outer box (here box #2) when we want an inner box (here box #3) with position: 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:
一个有效的技巧是用position: absolute代替来定位框 #2 position: relative。position: relative当我们想要position: absolute相对于外盒定位一个内盒（此处为框 #3）时，我们通常将 a放在外盒（此处为框 #2）上。但请记住：要使框 #3 相对于框 #2 定位，框 #2 只需要定位。通过这种变化，我们得到：
And here is the full code with this change:
这是带有此更改的完整代码：
<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>
回答by vise
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):
通过将绝对定位的 div 定位在您当前的相对容器内（您不希望剪辑的 div 应该在此 div 之外），可以通过将其定位到与其父级的大小相匹配的绝对定位 div 来实现类似的效果：
#1 .mask {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
overflow: hidden;
}
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.
请记住，如果您只需要在 x 轴上剪辑内容（这似乎是您的情况，因为您只设置了 div 的宽度），您可以使用overflow-x: hidden.
回答by Anthony
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.
如果外部 div（绿色框）内没有显示其他内容，为什么不将该内容包裹在另一个 div 中，我们称之为"content". 在这个新的内部 div 上隐藏了溢出，但在绿色框中保持溢出可见。
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.
唯一的问题是，您将不得不四处乱逛以确保内容 div 不会干扰红框的定位，但听起来您应该能够轻松解决这个问题。
<div id="1" background: #efe; padding: 5px; width: 125px">
<div id="content" style="overflow: hidden;">
</div>
<div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
<div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
</div>
</div>
回答by graphicdivine
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 the overflow:hiddento that instead. I don't think that overflow can be (or should be able to be) over-ridden.
我真的看不到按原样执行此操作的方法。我认为您可能需要overflow:hidden从 div#1 中删除 并在 div#1 中添加另一个 div（即作为 div#2 的同级）来保存您未指定的“内容”，并将其添加overflow:hidden到其中。我不认为溢出可以（或应该能够）被覆盖。
