《CSS世界》笔记五：CSS层叠规则及元素隐藏

上一篇：《CSS世界》笔记四：流的保护与破坏

写在前面

《CSS世界》这本书还剩六章，可是这本书的精华部分主要是前面的内容，这里仅把后面章节相对重要的内容以博客展现，想着了解更多的小伙伴仍是去阅读原文的好，毕竟三百多页的一本书并非小小几篇博客能彻底说清楚的。

这个也算是《CSS世界》读书笔记系列博客的终结篇了，虽然说是“二进宫”，收获依然满满，毕竟好书每次读都能读出新东西。这里仍是要吐槽几句，前端岗位不少同窗（确定不包括帅气的你啦！）都不过重视CSS，不就是布局吗，记几条属性也就可以实现一个网页布局，可是正是这些同窗，每每在作适配和页面调整时抱怨不断，或者在调整时几乎就是重构，CSS代码丝毫没有健壮性可言，熟不知合理使用CSS属性和健壮布局能为你省不少事，甚至可以为你省去不少js代码。这里彷佛写出了“CSS重要性”的论断，哈哈！

1、CSS世界的层叠规则

声明：CSS中并不仅是z-index可以决定元素的z轴顺序。

1.1 元素层叠顺序(stacking level)

补充说明：

1. 位于最下面的 background/border 特指层叠上下文元素（后面会详解）的边框和背景色。每个层叠顺序规则仅适用于当前层叠上下文元素的小世界；
2. inline水平盒子指的是包括inline/inline-block/inline-table元素的“层 叠顺序”，它们都是同等级别的；
3. 单纯从层叠水平上看，实际上 z-index:0 和 z-index:auto 是能够当作是同样的，实际上，二者在层叠上下文领域有着根本性的差别

记忆要诀：

1. 因为网页是图文展现为主，inline会高于标准流盒子和浮动盒子
2. 元素一旦成为定位元素，其 z-index 就是默认的 auto，根据上面的层叠顺序表，就会覆盖 inline 或 block 或 float 元素

1.2 层叠上下文(stacking context)

层叠上下文是一个概念，跟“块状格式化上下文” (BFC)相似。然而，概念这个东西是比较虚、比较抽象的，要想轻松理解，咱们须要将其具象化。

怎么个具象化法呢？咱们能够把层叠上下文理解为一种“层叠结界”，自成一个小世界。界中可能有其余的“层叠结界”，而自身也可能处于其余“层叠结界”中。

如何建立层叠上下文

（1）天生派：页面根元素天生具备层叠上下文，称为根层叠上下文（html标签）

（2）正统派：z-index 值为数值的定位元素的传统“层叠上下文”

对于position值为relative/absolute以及Firefox/IE(不包括Chrome)下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会建立层叠上下文

（3）扩招派：CSS3属性建立

1. 元素为flex布局元素(父元素display:flex | inline-flex)，同时z-index值不是auto
2. 元素的opacity值不是1
3. 元素的transform值不是none
4. 元素mix-blend-mode值不是normal
5. 元素的filter值不是none
6. 元素的isolation值是isolate
7. 元素的will-change属性值为上面2~6的任意一个(如will-change: opacity、will-chang:transform等)
8. 元素的-webkit-overflow-scrolling设为touch

CSS3建立层叠上下文引证：

<!-- 2在1之上 -->
<img src="1.jpg" style="position:relative">
<img src="2.jpg" style="transform:scale(1);">

<!-- 1在2之上 -->
<img src="2.jpg" style="transform:scale(1);">
<img src="1.jpg" style="position:relative">

因为层叠问题引起的bug：

描述：有一个绝对定位的黑色半透明层覆盖在图片上。可是，一旦图片开始走 fadeIn 淡出的 CSS3 动画，文字就跑到图片后面去了，由于文字一直是 100%透明的纯白色，文字变淡是由于跑到图片后面，而图片半透明，文字穿透显示而已

缘由：fadeIn 动画本质是 opacity 透明度的变化，“元素的opacity值不是1”时会建立层叠上下文，为1时为普通元素。致使层级发生变化时引起bug

1.3 层叠黄金准则（重点）

（1）谁大谁上：当具备明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个

（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素

下面有两个案例，请问两种状况的层叠顺序：

<div style="position:relative; z-index:auto;">
    <img src="1.jpg" style="position:absolute; z-index:2;">
</div>
<div style="position:relative; z-index:auto;">
    <img src="2.jpg" style="position:relative; z-index:1;">
</div>

<div style="position:relative; z-index:0;">
    <img src="1.jpg" style="position:absolute; z-index:2;">
</div>
<div style="position:relative; z-index:0;">
    <img src="2.jpg" style="position:relative; z-index:1;">
</div>

答案：（1）1在上2在下；（2）1在下2在上

分析：z-index: auto所在的<div>元素是一个普通定位元素，因而，里面的两个<img>元素的层叠比较就不受父级的影响，二者直接套用“谁大谁上”的准则;而z-index一旦变成数值，哪怕是 0，就会建立一个层叠上下文。此时遵循“层叠黄金准则”的另一个准则“后来居上”，根据在DOM文档流中的位置决定谁在上面

思考：在不居中层级错乱时，能够找找父级元素的层级与目标元素(或父级)层级比较

1.4 zIndex能够为负值

对照着上面的层叠顺序图，咱们能够知道zIndex为负值时是介于背景和普通流盒子之间的，直接看一个例子，请问下面的层叠状况

/* 状况一 */
<div class="father">
    <div class="son">son</div>
</div>

/* 状况二 */
<div class="father transform">
    <div class="son">son</div>
</div>

.father {
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 255, .7);
}
.son {
    position: relative;
    z-index: -1;
    width: 200px;
    height: 100px;
    background-color: rgba(255, 0, 0, .7);
}

.transform {
    margin-top: 20px;
    transform: scale(1);
}

分析：

状况一：当.father是普通元素时，.son元素所在的层叠上下文元素一是.father的某个祖先元素；.son是 z-index 负值元素，.father是 block 元素，也就是.son应该在.father元素的后面显示，所以，.son会被.father元素的蓝色背景覆盖；

状况二：当.father是层叠上下文元素时，z-index 负值元素在层叠上下文元素的背景上，所以，.son在.father元素的蓝色背景上；

2、元素隐藏

2.1 元素各类隐藏方法

（1）若是但愿元素不可见，同时不占据空间，辅助设备没法访问，但资源有加载，DOM 可访问，则能够直接使用 display:none 隐藏

.dn { display: none; }

（2）若是但愿元素不可见，同时不占据空间，辅助设备没法访问，但显隐的时候能够有transition 淡入淡出效果

.hidden {
    position: absolute;
    visibility: hidden;
}

（3）若是但愿元素不可见，不能点击，辅助设备没法访问，但占据空间保留，则可使用 visibility:hidden 隐藏

.vh { visibility: hidden; }

（4）若是但愿元素不可见，不能点击，不占据空间，但键盘可访问，则可使用 clip 剪裁隐藏

.clip {
    position: absolute;
    clip: rect(0 0 0 0);
}

（5）若是但愿元素不可见，不能点击，但占据空间，且键盘可访问，则能够试试 relative 隐藏。例如，若是条件容许，也就是和层叠上下文之间存在设置了背景色的父元素， 则也可使用更友好的 z-index 负值隐藏

.lower {
    position: relative;
    z-index: -1;
}

（6）若是但愿元素不可见，但能够点击，并且不占据空间，则可使用透明度

.opacity {
    position: absolute;
    opacity: 0;
    filter: Alpha(opacity=0);
}

（7）若是单纯但愿元素看不见，但位置保留，依然能够点能够选，则直接让透明度为 0

.opacity {
    opacity: 0;
    filter: Alpha(opacity=0);
}

2.2 display与visiblity隐藏比较

空间占据：

display:none 隐藏后的元素不占据任何空间

visibility:hidden 隐藏的元素空间依旧存在

后代隐藏原理：

display属性值为none时，该元素以及全部后代元素都隐藏

visibility属性值hidden时，子元素也会看不见，由于子元素继承了visibility:hidden

所以，当子元素设置visibility:visible;时，子元素又会显现

<ul style="visibility:hidden;">
    <li style="visibility:visible;">列表1</li>
    <li>列表 2</li>
    <li>列表 3</li>
    <li style="visibility:visible;">列表4</li>
</ul>

最终列表1和列表4依然会显示

3、总结

1. CSS层叠上下文理解和建立
2. CSS层叠顺序和规则
3. 元素隐藏的各类方式及对比

上一篇：《CSS世界》笔记四：流的保护与破坏