overflow-x:hidden对其内position:absolute的影响

在写一个Header组件的时候，添加了其中一行样式：

.header{
	overflow-x:hidden;
...
}

随后添加一个下拉列表，很自然地添加了：

.downlist{
	position:absolute;
	top:100%;
	left:0px;
    ...
}

然后发现，原本应该显示在.header以外的.downlist，却显示在.header内，并成了overflow-y:scroll;的效果，demo如下。

实验了下,

以div元素F为容器，其子元素C设置position:absolute，结论：

1.将overflow-x:hidden;去掉后，position:absolute可以正常使用。

2.给F添加overflow-x:hidden;后，如果需要将其子元素C通过position:absolute设置位置，left | top | right |bottom 依然可以使用，且依旧可以设置其位置。但是设定子元素的位置后，如果子元素的一部分超出F，或子元素整个在F外，则会从内部把F撑开。也就是说，F的外部边界（高宽）不变，但是内部自动添加overflow-y：scroll效果。

3.此时如果显示给子元素C添加overflow-y:auto || scroll || visible，相当于overflow-y:scroll 的效果。 如果添加的是overflow:hidden；则元素F不再滚动，元素C的超出F的部分也不会显示。

*overflow-x:hidden;只是影响了元素的BFC，这个情况与flex布局无关。