理解CSS定位中的overflow和visibility属性

overflow

overflow定义内容溢出时的如何处理，默认值visible表示内容会出现在元素框外。属性值hidden表示溢出内容会被裁剪。scroll表示溢出时浏览器出现滚动条以便查看溢出内容，不溢出时也会出现滚动条。auto表示当内容溢出时出现滚动条，当内容不溢出时不出现滚动条。inherit继承。

可通过overflow-x和overflow-y单独设置水平和垂直方向的溢出处理，当两者属性值相同时相当于overflow属性。

失效情况：

参考例1

当子元素绝对定位后，父元素使用overflow: hidden会出现失效情况，这是因为子元素脱离了正常文档流不受父元素控制，解决办法是给父元素设置position值为非static

当子元素使用fixed定位也会造成失效情况，固定定位是相对于视窗的，所以无法被其父元素裁剪

visibility

visibility定义元素的可见状态，默认值visible元素可见。属性值hidden元素隐藏。属性值collapse为表格的col和colgrounp元素定制，表示隐藏表格中的一行或一列，如果该值用到其他元素上，表现效果和hidden相同。inherit继承父元素。

当元素隐藏后虽然占据物理位置，但是是不受js控制的，比如如果绑定了click事件，点击隐藏区域事件是无效的，可以利用这点结合opacity元素制作过渡效果。参考例2.

对比visibility: hidden和display: none的不同：

1. visibility: hidden只是隐藏元素的可见性，不脱离文档流并保留元素之前所占据的物理位置。后者脱离文档流，不保留原来的物理位置，如果要重新显示元素需要页面重绘。

2. 父元素设置visibility: hidden，子元素设置visibility: visible，子元素可见。父元素设置display: none，子元素设置display: block，子元素不可见。