153

我有 3 个级别div：

  • （下方绿色）div带有的顶层overflow: hidden。这是因为如果超出框的大小，我希望该框内的某些内容（此处未显示）被裁剪。
  • （下面的红色）在这个里面，我div有position: relative. 唯一的用途是用于下一个级别。
  • （在下面的蓝色中）最后，div我从流程中取出，position: absolute但我希望相对于红色div（而不是页面）定位。

我希望将蓝色框从流程中取出并扩展到绿色框之外，但相对于红色框定位，如下所示：

但是，使用下面的代码，我得到：

并移除position: relative红色框上的，现在蓝色框可以离开绿色框，但不再相对于红色框定位：

有没有办法：

  • 保持overflow: hidden在绿色框上。
  • 蓝框是否扩展超出绿框并相对于红框定位？

完整来源：

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}
<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

4

4 回答 4

52

一个有效的技巧是将框#2 用position: absolute代替position: relative。当我们想要一个内盒（这里是盒#3）相对于外盒定位时，我们通常position: relative在外盒（这里是盒#2）上放置一个。position: absolute但请记住：要相对于框 #2 定位框 #3，只需定位框 #2。通过这种改变，我们得到：

这是此更改的完整代码：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>
于 2010-02-11T18:33:10.587 回答
6

There's no magical solution of displaying something outside an overflow hidden container.

A similar effect can be achieved by having an absolute positioned div that matches the size of its parent by positioning it inside your current relative container (the div you don't wish to clip should be outside this div):

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

Take in mind that if you only have to clip content on the x axis (which appears to be your case, as you only have set the div's width), you can use overflow-x: hidden.

于 2010-02-11T09:19:29.380 回答
0

我真的没有办法按原样执行此操作。我认为您可能需要overflow:hidden从 div#1 中删除并在 div#1 中添加另一个 div（即作为 div#2 的兄弟）来保存您未指定的“内容”并将其添加overflow:hidden到其中。我不认为溢出可以（或应该能够）被覆盖。

于 2010-02-11T09:14:24.640 回答
0

如果外部 div（绿色框）内没有显示其他内容，为什么不将该内容包裹在另一个 div 中，我们称之为"content". 在这个新的内部 div 上隐藏了溢出，但在绿色框上保持溢出可见。

唯一的问题是，您将不得不四处乱窜，以确保内容 div 不会干扰红色框的定位，但听起来您应该能够轻松解决这个问题。

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>
于 2010-02-11T09:21:41.700 回答