CSS：如何有位置：绝对div在一个位置：相对div不被裁剪由溢出：隐藏在容器上 [英] CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
问题描述
我有3个等级 div ：
- 绿色以下）顶层
div与overflow：hidden。这是因为我想要该框内的一些内容（此处未显示）超过了框的大小时才会裁剪。 - （下面红色） Inside这，我有
div与position：relative。 最后一个
div 我从 position：absolute 中取出流程，但是我想要相对于红色 div 页面）。 我想让蓝色框从流中移出，并扩展到绿色框之外，相对于红框定位，如下所示：
但是，使用下面的代码，我会得到：
并移除位置：相对在红色框上，现在蓝色框被允许离开绿色框，但是不再相对于红色框定位：
< img src =http://img.skitch.com/20100211-e96ktg4j9undir396m4p5ka3ki.pngalt =alt text>
有办法：
- 保留绿色框上的
overflow：hidden。 - 蓝框扩展到绿框之外并相对于红框放置？
CSS用于测试：
< html xmlns =http://www.w3.org/1999/xhtml xml：lang =enlang =en>
< body>
< br />< br />< br />
< div id =1style =overflow：hidden; background：#efe; padding：5px; width：125px>
< div id =2style =position：relative; background：#fee; padding：2px; width：100px; height：100px>
< div id =3style =position：absolute; top：10px; background：#eef; padding：2px; width：75px; height：150px/>
< / div>
< / div>
< / body>
< / html>
position：absolute 而不是 position：relative 。当我们想要一个内框（这里是框＃3）时，我们通常在一个外框（这里是框＃2）上放置一个 position：relative ：absolute 相对于外框定位。但是请记住：对于框＃3相对于框＃2定位，框＃2只需要被定位。有了这个变化，我们得到：
这里是这个更改的完整代码：
< html xmlns =http： w3.org/1999/xhtmlxml：lang =enlang =en>
< head>
< style type =text / css>
/ *定位* /
＃box1 {overflow：hidden}
＃box2 {position：absolute}
＃box3 {position：absolute; top：10px}
/ *样式* /
＃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>
我在框中绝对定位的框，带有溢出：自动或隐藏。 p>
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, with inline CSS for the sake of testing:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<br/><br/><br/>
<div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px">
<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>
</body>
</html>
A trick that works is to position box #2 with position: absolute instead of position: relative. We usually put a position: relative on an outer box (here box #2) when we want an inner box (here box #3) with position: absolute to 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:
<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>
I added more details about this on Absolutely positioned box inside a box with overflow: auto or hidden.
这篇关于CSS：如何有位置：绝对div在一个位置：相对div不被裁剪由溢出：隐藏在容器上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
