Question

我有一个包含其他div元素的div元素，如下所示：

<div style="overflow:hidden">
    <div id="a"></div>
    <div id="b"></div>
</div>

我有其他css规则来管理外部div的维度。在我的实际代码中，我想将div #a放在外部div下方10 xx处。但是，我希望div＃b仍然被外部div的溢出切断：隐藏。

实现这一目标的最佳方法是什么？

Answer 1

方法1

一个好方法是将溢出元素设置为position:fixed（这会使它忽略父溢出），然后使用这种技术将其相对于父元素定位：

.parent {
   position: relative;      
   .fixed-wrapper {
       position: absolute;         
       .fixed {
           position: fixed;
       }
   }
}

有一点需要注意的是，你不能在固定元素上设置任何top，right，left，bottom属性（它们都必须是默认的'auto'）。如果您需要稍微调整位置，可以使用正/负边距来代替。

方法2

我最近发现的另一个技巧是将overflow:hidden元素与position:static保持一致，并将覆盖元素相对于更高的父元素（而不是overflow:hidden父元素）定位。像这样：

http://jsfiddle.net/kv0bLpw8/

Answer 2

CSS

<style type="text/css">
#wrapper {
    width: 400px;
    height: 50px;
    position: relative;
    z-index: 1000;
    left: 0px;
    top: 0px;
}

#wrapper #insideDiv {
    width: 400px;
    height: 50px;
    overflow: hidden;
    position: absolute;
    z-index: 2000;
    left: 0px;
    top: 0px;
}

#wrapper #a {
    position: absolute;
    height: 30px;
    width: 100px;
    bottom: -40px;
    z-index: 1000;
    left: 0px;
}
</style>

HTML

<div id="wrapper">
  <div id="a">AAA</div>
  <div id="insideDiv">
    <div id="b">BBB</div>
  </div>
</div>

Answer 3

正如人们所说，元素必须在父母之外呈现，以便不被裁剪。但是你可以用JavaScript来实现类似的概念，而不必改变你的实际标记：

hello_world

然后传递要从其父级裁剪中排除的元素：

function breakOverflow(elm) {
   var top = elm.offset().top;
   var left = elm.offset().left;
   elm.appendTo($('body'));
   elm.css({
      position: 'absolute',
      left: left+'px',
      top: top+'px',
      bottom: 'auto',
      right: 'auto',
      'z-index': 10000
   });
}

如何忽略父元素的溢出：隐藏在css中

3 个答案: