CSS定位

布局和定位的区别：布局是屏幕平面上的，定位是垂直于屏幕的。

static：默认值，待在文档流里。
relative：相对定位，升起来，但不脱离文档流。它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。
absolute：绝对定位，定位基准是上级元素（祖先元素最近的一个，一般是父元素）里的非static。absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。
fixed：固定定位，定位基准是viewport（视口，浏览器窗口）。
sticky：粘滞定位。sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。 注意：一般，子元素写absolute，要在上级元素上加一个relative。

.container {
  z-index: -1 | 1 | 2; /* 大压小 default auto */
}

学会管理 z-index。

每个层叠上下文就是一个新的小世界（作用域），小世界里的z-index跟外界无关，处在同一个小世界的z-index才能比较。 负 z-index 逃不出小世界。