Question

请考虑以下示例：（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;}

标记：

<body>
<h1>overflow:hidden and absolutely positioned elements</h1>
<div id="wrapper">
<div class="markup">

      <div class="box1">box 1</div>
        <div class="box2">box 2</div>
        <div class="box3">box 3</div>
        <div class="box4">box 4</div>
</div>
</body>

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

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

无标记修改
不使用CSS3
跨浏览器工作
必须保留ID为wrapper的div 绝对定位，必须保持overflow:hidden

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

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

Answer 1

根据您设定的条件，您无法进行的操作。根据定义，overflow：hidden会剪切延伸到父元素视口之外的后代元素中的任何内容或内容。

要使其工作的唯一方法是删除overflow：hidden或将剪切的框移到包装器外。

http://www.w3.org/TR/CSS21/visufx.html

Answer 2

嗯，您的框#wrapper是第一个非默认定位祖先，因此形成了box1到box4的边界框。由于您已将#wrapper设置为overflow: hidden，因此隐藏了box1与box4重叠的部分。

您可以从overflow: hidden移除#wrapper，也可以将这些框移到#wrapper之外。

Answer 3

从overflow:hidden删除wrapper并完成。

如何使一个绝对定位（溢出：隐藏）容器的绝对定位的孩子显示在他们父母的区域之外？

3 个答案: