div的分层

z-index<0，就表示这个元素在background后边。
z-index越大越靠上。

position的五个取值

position: relative相对定位，升起来但是不脱离文档流。
元素所在的位置不变，显示的位置和之前有所偏移。
z-index默认是auto，算出来是0但不等同0

使用场景：和absolute配合使用，祖先元素relative，子元素absolute，使用absolute的子元素定位是相对于使用relative的祖先元素中最近的一个定位元素的。
position: absolute
使用场景：1. 脱离原来的位置，另起一层，比如对话框的关闭按钮。2. 鼠标提示。
配合z-index;
经验：
善用left: 100%;(想把元素放在右边)
善用left: 50%; 加负margin
某些浏览器上如果不写top/left会位置错乱。
position: fixed;
使用场景：1. 回到顶部。 2. 凡人的广告
不管页面怎么动，都相对于视口定位(视口就是在屏幕上显示的区域，iframe元素)
不要把有fixed的属性的元素放在有transform的元素中
配合z-index;
经验：不要在手机上使用fixed；

position属性总结：

static默认值，呆在文档流中
relative相对定位，升起来，但是不脱离文档流
absolute绝对定位，定位基准是祖先里的非static
fixed固定定位，定位基准是viewport(视口)
sticky粘滞定位

层叠上下文

每个层叠上下文就是一个新的小世界
这个小世界里的z-index跟外界无关
处在同一个小世界的z-index才能比较
除了z-index=auto不创建层叠上下文，别的z-index都可以创建(放在有非static的position标签中)可以创建层叠上下文。
还有哪些属性可以创建层叠上下文呢？
MDN文档有写。