html隐藏定位,html – 如何使绝对定位(溢出：隐藏)容器的绝对定位的子项显示在其父项区域之外？...

请考虑这个例子：(

working example)

样式声明：

body {background:#333;font:1em Arial,Helvetica,sans-serif;}

h1 {color:#ececec;text-align:center;margin:1.5em 0 1em;}

h2 {font-weight:normal;font-size:1.15em;

padding-bottom:5px;border-bottom:1px solid #999;}

p {padding-right:1em;color:#000;}

pre {font-size:1em;color:#06f;margin:1em 0;}

#wrapper {position:absolute;width:100px;height:100px;background:#ececec;

overflow:hidden;zoom:1;padding:20px;border-bottom:1px solid #000;

border-right:1px solid #000;border-top:1px solid #fff;

border-left:1px solid #fff;}

.css {float:right;width:50%;}

.markup {float:left;width:50%;margin-right:-1px;}

.Box1,.Box2,.Box3,.Box4 {background:#fff;position:absolute;padding:10px;border:1px solid #333;}

.Box1 {left:0;top:-20px;}

.Box2 {right:0;top:0;}

.Box3 {left:0;bottom:0;}

.Box4 {right:-20px;bottom:-20px;}

overflow:hidden and absolutely positioned elements

Box 1

Box 2

Box 3

Box 4

如您所见,Box1和Box4被剪裁.如何让它们在包含div的边界外可见？基本上这些框应该像工具提示一样显示(它们必须是页面上最顶层的元素).

关于首选解决方案的标准：

>没有标记修改

>没有使用CSS3

>跨浏览器工作

>必须保留带有id包装器的div

绝对定位,必须保持溢出：隐藏

编辑：我知道我的要求很难,但我必须与他们合作.我必须在一个我无法完全控制的环境中解决这个任务.

编辑#2：好的,这就是为什么我需要在标记中不重新定位框.在具体情况下,我想将它们用作其他元素的工具提示(特别是BeautyTips). DOM树中工具提示的位置是库内部工作的结果.当我想使用BeautyTips时,我的例子中可以看到的问题阻止了整个工具提示的显示：它被剪裁了.