position

通过定位可以将元素摆放到页面的任意位置，设置 position 属性设置定位：

• static 默认值，不开启定位，元素静止；
• relative ：相对定位；
• absolute ：绝对定位；
• fixed ：固定定位；
• sticky ：粘滞定位；

相对定位 relative

开启相对定位后，通过 偏移量 offset 来设置元素的位置：

定位元素的垂直方向：

• top ：定位元素和定位位置的上边距离，越大越靠下；
• bottom ：定位元素和定位位置的下边距离，越大越靠上；

定位元素的水平方向：

• left ：定位元素和定位位置的左边距离，越大越靠右；
• right ：定位元素和定位位置的右边距离，越大越靠左；

🌰 例子：

相对定位的特点：

• 开启相对定位以后，如果不设置偏移量元素，则元素不会发生任何变化；
• 相对定位是参照于元素在文档流中的位置进行定位的（可以理解为相对于自身原始位置）；
• 相对定位会提升元素的层级（表现为可以覆盖其他元素）；
• 相对定位不会改变元素的性质：块还是块，行内还是行内；（⭐️ 行内元素可以使用相对定位）

⭐️ Q1: 给 example 中的 三个 div 都设置相对定位，层级关系：在页面文档流中，越靠下的元素开启相对定位后，其层级越高；（没有设置层级或层级 z-index 设置相同值时，优先显示靠下的元素）

⭐️ Q2： 与浮动定位对比：

• 参考系：浮动的参考系是父元素；相对定位参考系是其自身；

• 可移动的方向：浮动只能左右移动；相对定位课上下左右移动；

• 影响：浮动只会影响页面布局（下方元素位置、高度塌陷）；

  相对定位不会影响页面布局；

• 性质不同：浮动会改变元素的性质（不再独占一行，其宽高都会被内容撑开）；相对定位不会改变元素的性质；

• 文字环绕：浮动不会覆盖文字；相对定位可以覆盖文字；

• 相对定位没有脱离文档流；

浮动和相对定位都不会从父元素中移出。

⭐️ Q3：相对定位不会改变元素的性质：

相比于浮动元素的特点，相对定位的元素位置发生改变以后，布局并没有产生影响，因为它的肉体（结构）仍然占据着原来的那个位置。只是其灵魂（内容）发生了移动。

绝对定位 absolute

position 属性值为 absolute ：

绝对定位的特点：

• 不设置偏移量，元素的位置不会发生变化；
• 开启绝对定位后，元素会从文档流中脱离；
• 绝对定位会改变元素的性质：行内变成块，块的宽高被内容撑开（与相对定位相反）；
• 绝对定位会使元素提升一个层级；
• 参考系：绝对定位元素是相对于其包含块进行定位的（与相对定位不同）

包含块 Containing Block

• 包含块就是离当前元素最近的开启了定位的祖先块元素；

• 如果所有的祖先元素都没有开启定位，则 HTML 根元素就是它的包含块；

  <!-- 如果box1开启定位，则box2的包含块是box1，否则就是body -->
  <div class="box1">
    <div class="box2"></div>
  </div>
  
  <!-- 如果box3开启定位，则em的包含块是box3，否则就是body -->
  <div class="box3">
    <span>
      <em>hello</em>
    </span>
  </div>
  

  （必要条件）开启定位指只要 position 的值不为 static 即可；

水平方向 / 垂直的布局

利用包含块，子元素在父元素內实现水平方向垂直方向的居中；

• 水平布局等式： left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其父元素的宽度 ；
• 垂直布局等式： top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + top = 其父元素的高度 ；
• 只是在没有 auto 时，会自动调整 top / bottom / left / right ；

🌰 例子：

固定定位 fixed

将 position 属性设置为 fixed；

固定定位的特点：

• 大部分特点都和绝对定位一样；
• 固定定位永远参照于 ** 浏览器的可视窗口（viewport）** 进行定位，不会随网页的滚动条滚动 —— 置顶于可视窗口；

🌰 例子：

粘滞定位 sticky

position 属性设置为 sticky ；

粘滞定位的特点：

• 该元素是根据文档流进行定位的，即相对于包含块进行偏移；
• 偏移量不会影响任何其他元素的位置；
• 与固定定位相似，但粘滞定位可以在元素达到魔偶个位置时固定；（不常置顶）；
• 粘性元素总是 “粘” 到其最近的具有 “滚动机制” 的祖先元素（当 overflow 为 hidden 、 scroll 、 auto 、 overlay 时创建），即使该祖先不是最近的实际滚动祖先元素；

🌰 例子 / 导航栏：

元素层级

对于开启了定位元素，可以通过 z-index 属性来指定元素的层级：

• z-index 需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示；
• 如果元素的层级一样，则优先显示靠下的元素；
• 祖先的元素的层级再高，也不会盖住后代元素；

浮动定位使用层级定位：

• 给 float 设置 z-index 无效；

• 默认情况，没有设置 z-index 或设置 z-index 大小 ≥ 0 时，浮动层级没有定位的层级高；

• 设置 z-index < 0 时，浮动层级可以定位的层级高；