57

我有一个 div 元素包装其他 div 元素,如下所示:

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

我还有其他管理外部 div 尺寸的 CSS 规则。在我的实际代码中,我想将 div#a 定位在外部 div 下方 10 px 处。但是,我希望 div#b 仍然被外部 div 的溢出:隐藏。

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

4

3 回答 3

119

方法一

一个好的方法是将溢出元素设置为position:fixed(这将使其忽略父溢出),然后使用以下技术将其相对于父元素定位:

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

一个警告是,您不能在固定元素上设置任何顶部、右侧、左侧、底部属性(它们必须都是默认的“自动”)。如果您需要稍微调整位置,您可以使用正/负边距来代替。

方法二

我最近发现的另一个技巧是保持overflow:hidden元素position:static并相对于更高的父级(而不是overflow:hidden父级)定位覆盖元素。像这样:

http://jsfiddle.net/kv0bLpw8/

于 2014-04-08T04:15:04.633 回答
2

#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;
}
<div id="wrapper">
  <div id="a">AAA</div>
  <div id="insideDiv">
    <div id="b">BBB</div>
  </div>
</div>

于 2012-08-17T21:12:20.073 回答
1

正如人们所说,元素必须在父级之外呈现,以免被裁剪。但是您可以使用 JavaScript 来实现类似的概念,而无需更改您的实际标记:

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
   });
} 

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

breakOverflow($('#exlude-me'));
于 2016-03-24T15:41:15.480 回答