子元素超出overflow:hidden的父元素显示

2017年12月10日Web前端0

我们常常会用到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给截断显示了。效果图是这样的：

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

.sub {
    width: 50px;
    height: 100px;
    background-color: olive;
    position: absolute;
}

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

当然了，如果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只能限制住相对于他自己的元素的显示。

三、总结

目前仅仅有这几个办法，若还有新方法，则新增。

CSS笔记

目录