分类导航

程序笔记发布时间：2022-06-07 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了[笔记]子元素超出overflow:hidden的父元素显示，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我们常常会用到overflow:hidden去防止某些个子元素超出显示，但是却希望某个子元素能超出显示，所以，此种情况下该如何呢？

一、position:absolute

在正常流布局中，我们可以使用这个方法。例如：

<div class="super">
    <div class="sub"></div>
</div>

<style type="text/CSS" media="screen">
.super {
    wIDth: 100px;
    height: 50px;
    border: 1px solID red;
    overflow: hIDden;
}
.sub {
    wIDth: 50px;
    height: 100px;
    BACkground-color: olive;
}
</style>

现象很简单，我们发现sub被super给截断显示了。效果图是这样的：

[笔记]子元素超出overflow:hidden的父元素显示

但是我们只要给sub一个position:absolute，sub就不是正常流显示了，此时的absolute是参考HTML定位的，所以他不会被正常流中的super给截断了。

.sub {
    wIDth: 50px;
    height: 100px;
    BACkground-color: olive;
    position: absolute;
}

此时就sub可以正常显示啦：

[笔记]子元素超出overflow:hidden的父元素显示

当然了，如果super就是非static的元素呢？那么就请看下一种方法。

二、position:fixed

前面了解到，既然只要相对HTML定位就可以保证能显示了，那么相对于浏览器窗口是否可以呢？

修改前面的样式：

.super {
    wIDth: 100px;
    height: 50px;
    border: 1px solID red;
    position: relative;
    overflow: hIDden;
}
.sub {
    wIDth: 50px;
    height: 100px;
    BACkground-color: olive;
    position: fixed;
}

此时sub依旧可以正常显示。当然，ie8-不支持fixed啦。

因此overflow:hidden只能限制住相对于他自己的元素的显示。