CSS定位

CSS定位（position）

取值如下：

• static 默认值，表示文档流。
• relative 相对定位，升起来，但不脱离文档流。(通常搭配absolute使用)
• abosolute 绝对定位，定位基准是祖先里最近的一个定位。通常和relative搭配使用。
• fixed 固定定位，定位基准是viewport(视口)

视口指的是：浏览器中不包括导航栏，仅仅是页面内容显示的区域。

• sticky 粘滞定位(设置该定位后，当查看下面内容时，相应元素会固定在某个位置，不会随着滚动条下拉变化位置。)
• 注意：加了定位的盒子是在文字上面的。

经验：

1. 子绝父相：写了absolute,一般需要给父亲加一个absolute。
2. 如果你写了absolute，需要写上top和left的值，不要留着默认，不然容易出错。
3. sticky兼容性较差。
4. fixed定位在移动端bug很多，尽量不要在移动端使用该属性。
5. fixed定位时的时候，父元素中含有transform属性时会影响定位的效果，开发时尽量避免该情况。

层叠上下文

• 每个层叠上下文就是一个新的世界，也可理解为作用域。
• 作用域里面元素的z-index跟外界无法比较，只能跟同一个作用域内的元素比较。

以下几种方式会创建层叠上下文

• 设置z-index，只要z-index不是auto，那么就会创建层叠上下文。
• 设置flex
• 设置 opacity
• 设置 transform属性
• CSS属性太恶心了，很多后果根本无法预测！