css定位

css布局是在平面内的，而定位是垂直于屏幕的。
z-index:1/2/3>定位元素>文字>浮动元素>块级子元素>border>background>z-index:-1/-2/-3（判断标准，让他们相交，看看谁在谁上面）

position

1. relative
   做absolute之父，可配合z-index(默认值为auto，auto算出来是0，但是auto和z-index:0不同。值越高在越上)
   经验：

• z-index写的时候一般不会写999这样很大的数字，直接123排序就好了。

2. absolute
   脱离某层文档流，找父级元素中第一个有定位的元素（position不是static的就是有定位的元素）作为参考者。
3. fixed
   这个会固定在页面中，上下拖动你的页面都不变，微博里面回到顶部的就是这么用的。
   （一般手机上不用fixed，bug太多）
4. sticky
   用于面试装备，平时不用的。
   没出页面的时候是正常的relative，出了就fixed在顶端。

层叠上下文

如何创建：

1. HTML本身就是一个层叠上下文。
2. z-index 非auto且position为r/a
3. opacity（半透明度）<1
4. transform不是none
5. position:fixed无论z-index是不是auto都可。
6. 其父元素z-index 非auto

含义

代表创建了一个小世界，只有同一个小世界的z-index才能互相比较，如果一个a，他的z-index为1，b为2，a中子元素a1，z-index为5，b中子元素b1为2，此时仍是b1在a1上面，因为只有a，b能进行比较（都在html这个小世界里面）

负index与层叠上下文

如果有负index，他依旧逃不出层叠上下文这个世界，且一定会在background上面。（记住这一个变态情况就好了。）