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

2017年12月10日Web前端

我们常常会用到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只能限制住相对于他自己的元素的显示。

三、总结

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