css布局是在平面内的，而定位是垂直于屏幕的。
z-index:1/2/3>定位元素>文字>浮动元素>块级子元素>border>background>z-index:-1/-2/-3（判断标准，让他们相交，看看谁在谁上面）
position
- relative
做absolute之父，可配合z-index(默认值为auto，auto算出来是0，但是auto和z-index:0不同。值越高在越上)
经验：
- z-index写的时候一般不会写999这样很大的数字，直接123排序就好了。
- absolute
脱离某层文档流，找父级元素中第一个有定位的元素（position不是static的就是有定位的元素）作为参考者。 - fixed
这个会固定在页面中，上下拖动你的页面都不变，微博里面回到顶部的就是这么用的。
（一般手机上不用fixed，bug太多） - sticky
用于面试装备，平时不用的。
没出页面的时候是正常的relative，出了就fixed在顶端。
层叠上下文
如何创建：
- HTML本身就是一个层叠上下文。
- z-index 非auto且position为r/a
- opacity（半透明度）<1
- transform不是none
- position:fixed无论z-index是不是auto都可。
- 其父元素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上面。（记住这一个变态情况就好了。）
网友评论