如何使绝对定位（溢出：隐藏）容器的绝对定位子显示在其父区域之外？答案

【问题标题】：How to make an absolutely positioned (overflow:hidden) container's absolutely positioned children show outside of their parent's area?如何使绝对定位（溢出：隐藏）容器的绝对定位子显示在其父区域之外？
【发布时间】：2011-02-04 12:33:39
【问题描述】：

请考虑这个例子：(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 时，在我的示例中可以看到的问题阻止了整个工具提示的显示：它被剪裁了。

【问题讨论】：

我不是 CSS 专家，但overflow:hidden 的重点肯定是子 div 不会出现在外面？如果您不想要它的功能，为什么需要overflow:hidden？
您不觉得您的要求不合逻辑吗？这就像要求某人在手刹拉起时以 100 公里跑，然后你踩刹车
在您的标准中是否可以接受对 css 和/或 dom 结构的 js 修改？
按照您列出的所有确切规范，如果没有 JS，这是不可能的。
包装 div 没有关闭。

标签： html css css-position

【解决方案1】：

在您设置的条件下，您尝试做的事情是不可能的。根据定义，overflow:hidden 会剪裁任何内容或子元素内延伸到父元素视口之外的内容。

您要使其工作的唯一方法是删除溢出：隐藏或将剪切框移到包装器之外。

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

【讨论】：

通过将 overflow:hidden 移动到 .markup 并将框放在 .markup 之外但仍在 wrapper 内，可以实现所需的效果。 jsfiddle.net/yZdBD/16
编辑了我的问题以回答为什么我既不能设置溢出属性，也不能移动框。
那你就完蛋了，你必须能够做出改变才能让它发挥作用。
我不得不说，“将剪切框移到包装器之外”打破了将文档与演示文稿分离的原则，而这正是 HTML+CSS 应该提供的。跨度>
您是否阅读了原始问题@Kaz 的要求？这是显示具有溢出：隐藏设置的 div 内容的唯一方法。正确的答案是更改标记，但问题要求中明确禁止这样做。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

从wrapper 中删除overflow:hidden 并完成。

【讨论】：