CSS：如何有位置：绝对div在一个位置：相对div不会被溢出裁剪：隐藏在容器上
我有3个级别的div ：
- （在下面的绿色）顶层
div与overflow: hidden。 这是因为如果超出框的大小，我想要在该框内的某些内容（此处未显示）进行裁剪。 - （在下面红色）在这里面，我有
position: relativedivposition: relative。 唯一的用途是用于下一个级别。 - （在下面的蓝色）最后一个
div我从position: absolutestreamposition: absolute但我要定位相对于红色div（而不是页面）。
我想把蓝色的盒子从stream动中取出，并且扩展到绿色的盒子之外，但是相对于红色盒子的位置如下：
替代文字http://img.skitch.com/20100211-2iejd2t9iabxb2rgs9b6msht2.png
然而，下面的代码，我得到：
替代文字http://img.skitch.com/20100211-mfjtr1st2yy5u4jhc3chi1qi3d.png
并且移除position: relative对于红色框的position: relative ，现在允许蓝色框离开绿色框，但是相对于红色框不再被定位：
替代文字http://img.skitch.com/20100211-e96ktg4j9undir396m4p5ka3ki.png
有没有办法：
- 保持
overflow: hidden在绿色框上。 - 让蓝色的盒子伸出绿色的盒子并相对于红色的盒子定位？
完整的源代码，为了testing，使用内联CSS：
<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>
一个可行的诀窍就是将方框＃2放置在position: absolute position: relative而不是position: relative 。 当我们想要一个内部盒子（这里是盒子＃3）的position: absolute位置相对于外部盒子时，我们通常在一个外部盒子（这里是盒子＃2）上放置一个position: relative 。 但请记住：对于方框＃3相对于方框＃2定位，只需要定位方框＃2。 有了这个变化，我们得到： alt text http://img.skitch.com/20100211-k9ksqaq4a46cpfjasitf1h4ayx.png
这里是完整的代码：
<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>
我添加了更多的详细信息关于绝对定位盒子里面溢出：自动或隐藏 。
在溢出的隐藏容器之外没有显示某些东西的神奇解决scheme。
类似的效果可以通过将绝对定位的div放置在当前的相对容器（不想剪辑的div应该在该div之外）来匹配其父容器的大小来实现：
#1 .mask { width: 100%; height: 100%; position: absolute; z-index: 1; overflow: hidden; }
请记住，如果您只需要剪切x轴上的内容（这似乎是您的情况，因为您只设置div的宽度），则可以使用overflow-x: hidden 。
我真的没有办法做到这一点。 我认为你可能需要删除overflow:hidden第一个div，并在第一个div中添加另一个div（即作为兄弟到div＃2）来保存你的未指定的内容，并添加overflow:hidden 。 我不认为溢出可能（或应该能够）被覆盖。
如果其他内容没有显示在外部div（绿色框）内，为什么不把这些内容包裹在另一个div内部，我们称之为"content" 。 在这个新的inner-div上隐藏溢出，但保持溢出在绿色框中可见。
唯一的问题是，你将不得不乱搞，以确保内容div不会干扰红色盒子的位置，但听起来你应该能够解决这个问题，很less头痛。
<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>
