今天完成的事情：

上网查找资料制作z-index与层叠上下文的ppt并在晚上讲解；

明天计划的事情：

开始写任务六；

遇到的问题：

以前做css任务时，总觉得z-index就是一个元素显示的优先级的一个属性，z-index越大，元素就在越上方显示；z-index越小，元素就在越下方显示，没有想到过z-index与层叠上下文的关系，感觉自己是否是太浮躁了，一直都是在跟着任务走，很多只是的拓展并没有去接触，以后这方面要注意；

收获：

1、背景介绍

层叠上下文，就是在呈现的时候决定哪个元素在上、哪个元素在下，初学的时候觉得这东西应该就是跟z-index的大小有关，然而并没有这么简单，我们来感受下。

2、知识剖析

先了解一下z-index的基本信息：

在W3C是这样描述的：

每个元素都具有三维空间位置，除了水平和垂直位置外，还能在 "Z轴" 上层层相叠、排列。元素在 "Z轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。在文档中，每个元素仅属于一个层叠上下文。元素的层叠级别为整型，它描述了在相同层叠上下文中元素在 "Z轴" 上的呈现顺序。同一层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则，即其在HTML文档中的顺序。不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关。

z-index 接受的属性值为：关键字auto和整数，整数可以是负值。

需要注意的是 z-index 虽然很给力，却只能应用于定位元素（即设置了 position 属性为非 static 值），其它情况下，z-index 将被忽略。

什么是层叠上下文（Stacking Content）

在一个层叠上下文，所有的元素根据规则从下到上排列，分成了七个等级：

1、背景和边框 — 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。

2、负z-index值 — 层叠上下文内有着负z-index值的子元素。

3、块级盒 — 文档流中非行内非定位子元素。

4、浮动盒 — 非定位浮动元素。

5、行内盒 — 文档流中行内级别非定位子元素。

6、z-index: 0 — 定位元素。这些元素形成了新的层叠上下文。

7、正z-index值 — 定位元素。层叠上下文中的最高等级。

3、常见问题

观看一下代码，判断哪一种颜色的方块显示在最上方？

HTML部分

                <div class="red">

                    <div class="yellow"></div>

                </div>

                <div class="green">

                    <div class="blue"></div>

                </div>

CSS部分

                <style type="text/css">

                    .red{

                        position: relative;

                        width: 200px;

                        height: 200px;;

                        background-color: red;

                        z-index: 1;

                    }

                    .yellow{

                        position: absolute;

                        width:150px;

                        height: 500px;

                        margin-left: 20px;

                        background-color: yellow;

                        z-index: 5;

                    }

                    .green{

                        position: relative;

                        width: 200px;

                        height: 200px;

                        margin-left: 50px;

                        background-color: green;

                        z-index: 2;

                    }

                    .blue{

                        position: absolute;

                        width:100px;

                        height: 100px;

                        background-color: blue;

                        z-index: 2;

                    }

                </style>

4、解决方案

层叠上下文是具有包含关系的，同时又各自应用层叠规则而互不影响，也就是说一个层叠上下文中有一个z-index值很大的定位元素，它依然会处于层叠等级高于创建该层叠上下文元素的元素的下方。

5、编码实战

无

6、拓展思考

opacity与层叠上下文

7、参考文献

W3C：http://www.w3school.com.cn/cssref/pr_pos_z-index.asp

关于z-index那些你不知道的事：https://webdesign.tutsplus.com/zh-hans/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892

Stacking Content层叠上下文：https://leozdgao.me/stacking-content-basic/

8、更多讨论

opacity与层叠上下文