CSS样式——元素定位

• 相对定位

  position:relative

  1. 在没有设置偏移量时，对元素本身没有影响
  2. 设置相对定位后，元素不会脱离文档流，并且不会影响其他元素布局，但依旧占位

• 绝对定位

  position:absolute

  1. 设置绝对定位后，元素会脱离文档流
  2. 设置绝对定位后，行内元素支持块元素特性，块元素支持行内元素特性
  3. 设置绝对定位后，元素参照最近设置相对定位的父级元素进行偏移定位，如果所有父级元素没有进行设置相对定位，则按照整个文档窗口进行定位

• 固定定位

  position:fixed

  1. 始终以浏览器可视窗口进行定位，不会受到窗口滚动和父级元素定位的影响
  2. 设置固定定位后，元素脱离文档流
  3. 设置固定定位后，行内元素支持块元素特性，块元素支持行内元素特性

• 黏性定位

  position:sticky

  1. 没有到达指定偏移位置无定位效果，当到达指定偏移位置后元素固定在那个位置不动

• 设置定位元素偏移量

  向左偏移语法：`left:10px`
  向右偏移语法：`right:10px`
  向上偏移语法：`top:10px`
  向下偏移语法：`bottom:10px`

• 设置定位元素显示层级关系

  z-index:数值

  1. 设置定位元素的层叠顺序，值越大，层级就越高，显示在上层
  2. 父元素的层级会影响子元素的层级关系
  3. 值为auto时，不参与层级关系比较