绝对位置和溢出:隐藏

Question

<div id="parent" style="overflow:hidden; position:relative;">
  <div id="child" style="position:absolute;">
  </div>
</div>

我需要显示比它的父元素更大的子元素,但不删除overflow:hidden; 这可能吗？父元素有一个position:relative; 子元素在它的父元素边界之外被剥离.

(元素有额外的css定义我只是为了清晰度而设置样式属性)

Answer 1

完全不可能用你想要的overflow: hidden和position: relative父母一起做你想做的事情div.相反,你可以引入一个额外的孩子div并转向overflow: hidden它.

请参阅:http://jsfiddle.net/thirtydot/TFTnU/

HTML:

<div id="parent">
    <div id="hideOverflow">
        <div style="width:1000px;background:#ccc">sdfsd</div>
    </div>
  <div id="child">overflow "visible"</div>
</div>

CSS:

#parent {
    position:relative;
    background:red;
    width:100px;
    height:100px
}
#child {
    position:absolute;
    background:#f0f;
    width:300px;
    bottom: 0;
    left: 0
}
#hideOverflow {
    overflow: hidden
}

Answer 2

该问题有一个名称：“ offsetParent ”。一旦元素获得绝对|相对位置或通过转换改变其位置/大小，它就会成为其子元素的 offsetParent。所有元素的原始 offsetParent（因此将显示溢出内容的区域或相对于给定绝对位置的区域）是浏览器或 iFrame 的视口。但是，在将绝对或相对位置应用于元素之后，ist 边界框成为定位和剪切所有 ist 子元素的新起点。

在一个项目中，我有一个包含下拉菜单的“弹出”窗口。下拉很容易超出窗口的限制。但是，一旦移动窗口（通过使用转换或相对定位），下拉菜单就会出现在错误的位置（将窗口的左上角位置作为附加偏移量），并在窗口的边框处被剪裁。我使用的快速技巧是将下拉菜单附加为 Body 的子级（而不是窗口）并将其绝对定位，使用打开菜单的按钮的坐标（来自按钮的 clientBoundingBox）以及与按钮的 offsetParent 的偏移量) 作为下拉的绝对位置。那么身体又是限制范围了。然而，如果涉及多个级别的 z 轴排序（因为下拉菜单的 z 轴是相对于 Body 的，这可能与窗口的 z 轴不同），这就有点棘手。但由于窗口必须可见（因此位于顶部）才能打开菜单，因此可以忽略不计。当然，这个解决方案需要使用JavaScript，而不能通过简单的CSS来完成。

你不能吃掉蛋糕并保留它。如果您从布局上下文中取出某些内容，它就会成为自己的、独立的（且有限的）布局“框架”

Answer 3

下面的代码就像一个魅力。

<div id="grandparent" style="position:relative;">
    <div id="parent" style="overflow:hidden;">
        <div id="child" style="position:absolute;">
        </div>
    </div>
</div>