CSS元素隐藏“失效”以其妙用

转自： http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/

一、CSS元素隐藏

在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击

{ display: none; /* 不占据空间，无法点击 */ }

{ visibility: hidden; /* 占据空间，无法点击 */ }

{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }

{ position: relative; top: -999em; /* 占据空间，无法点击 */ }

{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }

{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }

{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }

二、display:none和visibility:hidden

目前，我所知道的不同有三点（欢迎补充）：

1. 空间占据
2. 回流与渲染
3. 株连性

第一点，想必都知道；第二点我之前有多篇译文提过，display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题；第三点估计是不少同行不知道的，就是“株连性”方面的差异。

所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。我顿时想起了《地球反击战》或是《木乃伊之蝎子王》，一旦把母体搞跛了，小辈啊、下属啊什么的都瞬间烟消云散。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

举例来说吧，通常情况下，我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。于是，我们就会有类似的认识迁移：应用了visibility:hidden声明下的子孙元素如何不屈地挣扎都摆脱不了不可见被抹杀的命运。而实际上却存在隐藏“失效”的情况。

何时隐藏“失效”？很简单，如果子孙元素应用了visibility:visible，那么这个子孙元素又会刘谦般地显现出来。

三、height:0和overflow:hidden的组合

overflow:hidden 用中文理解就是“溢出隐藏”，也就是盒子以外的内容都咔嚓掉不可见的。加上 height:0 ，只要是一般的非inline水平元素，则元素内部所有子孙都应该是不可见的。这是我们具象化的认识，而且N多的经验验证都是如此，但是实际上是这样子吗？

height:0和overflow:hidden组合隐藏“失效”的条件如下：祖先元素没有position:relative/absolute/fixed声明，同时内部子元素应用了position:absolute/fixed声明。

因此：

body
    height: 0; overflow: hidden;
        position: absolute; /* 不会被隐藏 */

position: relative;
    height: 0; overflow: hidden;
        position: absolute; /* 不会被隐藏 */

height: 0; overflow: hidden;  position: relative;
    position: absolute; /* 会被隐藏 */

height: 0; overflow: hidden;
    position: relative;
        position: absolute; /* 会被隐藏 */

四、height:0和overflow:hidden“失效”妙用

右侧固定返回最上面text-align时，空格隐藏处理。具体看另一个文章