css中overflow和position的搭配

背景

大数据控制平台查询结果的表格的表头需要做过滤功能，我的想法是在每一列的表头上加个过滤小图标，当点击它时弹出个相对右对齐的小框，框里有个输入框，一个过滤按钮，一个清空按钮。类似下图：

执行

一般来说，就是将表头每一格都设置成

position:relative;

然后将弹框设置成

position:absolute;

right:0px;

top:35px;

z-index:999;

 即可实现。

但是我设置后弹框竟然没有显示出来。

经过我的检查，发现是因为表头的样式中有

overflow:hidden;

是不是它导致的，于是我做了个测试：

1.父级没有overflow:hidden

<style>

.parent{

    width:100px;

    height:100px;

    background-color:red;

    color:white;

    font-size:20px;

    position:relative;

}

.child{

    width:100px;

    height:100px;

    background-color:black;

    color:white;

    font-size:16px;

    position:absolute;

    left:50px;

    top:50px;

}

style> 

<div class='parent'>

    Parent

    <div class='child'>Childdiv>

div>

显示结果为：

 

此时子元素超过父级的部分也显示出来了。

2.父级设置了overflow:hidden

<style>

.parent{

    width:100px;

    height:100px;

    background-color:red;

    color:white;

    font-size:20px;

    position:relative;

overflow:hidden;

}

.child{

    width:100px;

    height:100px;

    background-color:black;

    color:white;

    font-size:16px;

    position:absolute;

    left:50px;

    top:50px;

}

style> 

<div class='parent'>

    Parent

    <div class='child'>Childdiv>

div>

显示结果为：

此时子元素超过父级的部分被隐藏掉了，果然是overflow捣的乱。

但是不是只要有overflow:hidden子元素就显示不出来呢？

3.父元素只有overflow:hidden，没有position:relative

<style>

.parent{

    width:100px;

    height:100px;

    background-color:red;

    color:white;

    font-size:20px;

overflow:hidden;

}

.child{

    width:100px;

    height:100px;

    background-color:black;

    color:white;

    font-size:16px;

    position:absolute;

    left:50px;

    top:50px;

}

style> 

<div class='parent'>

    Parent

    <div class='child'>Childdiv>

div>

显示结果为：

和第一种情况结果几乎一样，Parent中没有设置position:relative;或者position:absolute;或者position:fixed时，子元素会继续往上级找，找到有这几个设置中其中任意一个元素为止，继而将其作为子元素的相对位置参考对象，本例中只有一个父级没有找到，这时就默认将body作为其位置参考对象。

 

既然这样我就把表头处的overflow:hidden去掉，最外层再套个div，将其设置overflow:hidden,这样就既不影响之前隐藏超出部分的功能，也能满足现在的弹框显示功能。

4.父级没有overflow:hidden,最外层加个div并设置其overflow:hidden

<style>

.wrapper{

    width:100px;

    height:100px;

    background-color:blue;

    color:white;

    font-size:24px;

position:relative;

}

.parent{

    width:100px;

    height:100px;

    background-color:red;

    color:white;

    font-size:20px;

overflow:hidden;

}

.child{

    width:100px;

    height:100px;

    background-color:black;

    color:white;

    font-size:16px;

    position:absolute;

    left:50px;

    top:50px;

}

style> 

<div class='wrapper'>

Wrapper

<div class='parent'>

    Parent

    <div class='child'>Childdiv>

div>

div>

显示结果为：

由此可看出子元素Child显示出来了。

也就是说只要父级中position:relative/absolute/fixed和overflow不同时存在就可以了，是不是这样呢？

5.父元素只有position:relative没有overflow:hidden，最外层加个div并设置其overflow:hidden

<style>

.wrapper{

    width:100px;

    height:100px;

    background-color:blue;

    color:white;

    font-size:24px;

overflow:hidden;

}

.parent{

    width:100px;

    height:100px;

    background-color:red;

    color:white;

    font-size:20px;

position:relative;

}

.child{

    width:100px;

    height:100px;

    background-color:black;

    color:white;

    font-size:16px;

    position:absolute;

    left:50px;

    top:50px;

}

style> 

<div class='wrapper'>

Wrapper

<div class='parent'>

    Parent

    <div class='child'>Childdiv>

div>

div>

显示结果为：

可以看到此时Child超出的部分仍然被隐藏了，这是个很奇怪的事，大家都知道有些样式属性是可以被继承的，我查了mdn后发现这两个都是无法继承的，详情参见position和overflow.

唯一可以解释的就是position:absolute的子元素的显示隐藏和其参照位置的父级元素的息息相关，皮之不存,毛将焉附,如果父级都被限制超出的部分会被隐藏，那么子元素也会受到相同命运，不管它的position是不是absolute。

结论

经过上述的实验过程得出的结论，我将表头去除了position:relative样式，外层又套了个div设置position:relative,解决了弹框显示的问题。