如何忽略父元素'；s溢出：隐藏在css中

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

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

我有其他css规则来管理外部div的维度。在我的实际代码中，我希望将div#a精确定位在外部div下方10 px处。但是，我希望div#b仍然被外部div的溢出：hidden切断

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

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>

#包装纸{
宽度：400px；
高度：50px；
位置：相对位置；
z指数：1000；
左：0px；
顶部：0px；
}
#包装纸#内装{
宽度：400px；
高度：50px；
溢出：隐藏；
位置：绝对位置；
z指数：2000；
左：0px；
顶部：0px；
}
#包装纸{
位置：绝对位置；
高度：30px；
宽度：100px；
底部：-40px；
z指数：1000；
左：0px；
}

HTML

AAA
BBB

方法1

一个很好的方法是将溢出元素设置为

位置：fixed

（这将使其忽略父溢出），然后使用此技术将其相对于父溢出进行定位：

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

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

方法2

我最近发现的另一个技巧是使用

position:static

保留

overflow:hidden

元素，并将覆盖元素相对于更高的父元素（而不是

overflow:hidden

父元素）进行定位。像这样：

---

正如人们所说，元素必须在父元素之外呈现，才能不被裁剪。但您可以使用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'));

---

你不能那样做，你需要把div a从div中取出，溢出：隐藏。

\a{position:relative；top:10px；}

？或者你的意思是你想让a

#a

在外分区的底部边界以下吗？@MarcB-是的，我想把a定位在外分区的底部边界以下，那么你不能用你的结构来做。子项不能更改父项的样式。您必须将

#a

移动到容器外部。当您无法将

#a

放置到父容器外部时，似乎唯一的方法是将

设置为
style=“overflow:visible”
到父容器），这应该是实际的解决方案。在所有浏览器中都像做梦一样工作。方法1可以工作，但如果用户滚动页面，可能会产生奇怪的结果。人们得到了这个答案：一定要查看方法2下的JSFIDLE——它非常简单，而且非常有效！方法1还有一个警告：您不能在溢出的元素上设置任何转换集。如果容器在fiddle中有ScrollBarInterest选择“ignore overflow”（忽略溢出）类名，则转换效果不佳。此代码通过更改html结构解决了特定问题，但不要忽略父元素溢出此方法有以下缺点：1。元素丢失了一些样式（例如.parent.element{…}）2。您不能依赖js代码中的祖先（例如$（element）.closest（'.js parent'））
breakOverflow($('#exlude-me'));