Question

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

我需要显示比它的父元素大的子元素，但不删除溢出：隐藏;这可能吗？父元素有position:relative; 一旦子元素离开它的父母边界，它就会被剥离。

（元素有额外的css定义，我只是将样式属性设置为清晰度）

Answer 1

完全不可能在父overflow: hidden上使用position: relative和div执行您想要的操作..相反，您可以引入额外的子div并移动{{ 1}}到那个。

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

<强> HTML：

overflow: hidden

<强> CSS：

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

Answer 2

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

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

Answer 3

我通常使用overflow：hidden as clearfix。在这种情况下，我放弃了，只需添加一个额外的div。

<div id="parent" style="position:relative;">
  <!-- floating divs here -->
  <div id="child" style="position:absolute;"></div>
  <div style="clear:both"></div>
</div>

Answer 4

使用css ...

* {margin: 0; padding: 0;}

#parent {width: auto; overflow: hidden;}

#child {position: absolute; width: auto;}

对于宽度自动，它将始终附加到尽可能小的尺寸;并且通过重置它将有助于保持自然流动。

但如果孩子比父母更大，那么就不可能。但是使用这个CSS，我认为你将达到你想要的最大可能性。

Answer 5

thirtydot的解决方案实际上是一个好主意。

以下是一个更清晰的例子：http://jsfiddle.net/y9dtL68d/

<强> HTML

<div id="grandparent">
    <div id="parent">
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
        <p>this has a lot of content which ...</p>
    </div>
    <div id="child">
        dudes
    </div>    
</div>

<强> CSS

#grandparent {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 20px;
    background: #d0d0d0;
}
#parent {
    width: 150px;
    height: 150px;
    overflow:hidden;
}
#child {
    position: absolute;
    background: red;
    color: white;
    left: 100%;
    top: 0;
}

Answer 6

我相信，每个前端开发人员都至少遇到过这种情况。假设您需要绝对定位某物……然后您尝试将其朝某个方向移动，但动臂消失了……您忘了父级设置为溢出：已隐藏，现在您的元素在隐藏的无限真空中丢失了。 css技巧来做到这一点。请找到下面的演示示例...

<br><br><br>
<div class="grand-parent">
  <div class="parent">P
    <div class="child">child</div>
  </div>
</div>
css code:


.grand-parent {
  width:50px;
  height:50px;
  position:relative;
  background-color: grey;
}
.parent {
  width:10px;
  height:30px;
  overflow:hidden;
  background-color: blue;
}
.child {
  position:absolute; 
  width:50px;
  height:20px;
  background-color: red;
  top:-10px; 
  left:5px;
}

Answer 7

我以一种非常简单的方式做到了

<div class="rootparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

.rootparent {
  position:relative;
  border:1px solid #ccc;
  width:150px;
  height:150px;
}
.parent {
  overflow:hidden;
}
.child {
   position: absolute;
   top: -10px;
   right: -15px;
   width: 30px;
   height: 30px;
   border: 1px solid red;
}

Here is jsfiddle link

Answer 8

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

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

您不能吃蛋糕。如果您从布局上下文中删除某些内容，它将变成自己的，独立的（且有限的）布局“框架”

绝对位置和溢出：隐藏

8 个答案: