CSS定位

布局和定位有啥区别？

• 布局是屏幕屏幕平面上的

• 定位是垂直于屏幕的

position属性

• static默认值，待在文档流里

• relative相对定位，升起来，但不脱离文档流

• absolute绝对定位，定位基准是祖先里的非static元素

• fixed固定定位，定位基准是viewport （视口）

• sticky粘滞定位

• 如果你写了absolute,一般都得补一个relative

• 如果你写了absolute或fixed,一定要补top和left

• sticky兼容性很差，主要用于面试装逼

position: relative

• 用于做位移（很少用）

• 用于给absolute元素做爸爸

• z-index: auto 默认值，不创建新的层叠上下文

• z-index: 0/1/2

• z-index: -1/-2

• 默认每一个元素的z-indexd的值是auto,auto计算出来的值是0，但是你不能写0

• 写z-index:9999的都是彩笔

• 学会管理z-index

position: absolute

• 脱离原来的位置，另起一层，比如对话框的关闭按钮

• 鼠标提示

• 很多彩笔都以为absolute是相对于relative定位的 , absolute是相对于祖先元素中最近的一个定位元素定位的 ，定位元素：不是static的元素

• 某些浏览器上如果不写top/left会位置错乱

• 善用left：100%

• 善用left: 50%;加负margin

position: fixed

• 烦人的广告

• 回到顶部按钮

• 手机上尽量不要使用这个属性,坑很多

• 不信你搜一下移动端fixed

层叠上下文

• 每个层叠上下文就是一个新的小世界（作用域）

• 这个小世界里面z-index 跟外界无关

• 处在同一个小世界的z-index才能比较

• 默认的层叠上下文是HTML元素

• MDN文档有写

• 需要记忆的有z-index/flex/opacity/transform

• 知道这些知识的面试官也不太多，不用花时间背

• 忘了就搜 层叠上下文MDN

• 负z-index逃不出当前层叠上下文