前端基础内容（七）

css定位（position）

更加高级的布局手段

• 通过定位可以将元素摆放到页面的任意位置
  • static：默认值，静止的，没有开启定位
  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位
  • sticky：粘滞定位

1、相对定位（relative）

• 当元素的position属性值设置为relative时，则开启了元素的相对定位
• 特点
  1. 设置相对定位之后，如果不设置偏移量，元素不会发生任何变化
  2. 相对定位是参照元素在文档流中的位置进行定位的。
  3. 相对定位会提升元素的层级
  4. 相对定位不会使元素脱离文档流，不会改变元素的性质，块还是块，行内还是行内
• 偏移量
  • top
  • right
  • bottom
  • left

2、绝对定位（absolute）

• 当元素的position属性值设置为absolute时，则开启了绝对定位
• 特点
  1. 开启绝对定位之后，如果不设置偏移量，元素的位置不会发生变化
  2. 元素会从文档流中脱离
  3. 会改变元素的性质，行内变成块，块的宽高被内容撑开
  4. 绝对定位会提升元素的层级
  5. 绝对定位是相对于其包含块进行定位的
     • 包含块（containing block）：包含块就是离当前元素最近的祖先块元素
     • 绝对定位的包含块是离他最近的***开启了定位的祖先元素***
     • 如果所有的祖先元素都没开启定位，则***根元素***就是他的包含块

3、固定定位（fixed）

• 当元素的position属性值设置为fixed时，则开启了固定定位
• 固定定位也是一种绝对定位，所以固定定位的特点大部分都和绝对定位一样
• 唯一不同的是：固定定位永远参照于***浏览的视口***进行定位
  • 固定定位的元素不会随网页的滚动条滚动

4、粘滞定位（sticky）

• 当元素的position属性值设置为sticky时，则开启了粘滞定位
• 他和相对定位的特点基本一致
• 不同的是：当时元素到达固定位置时，将其固定

5、绝对定位元素的布局

• 水平布局
• /* left+margin-left+border-left+padding-left+content+padding-right+border-right+margin-right+right */
• 当开启了绝对定位后
  • 水平方向的布局等式就需要添加left和right两个值
  • 规则和之前一样
    • 如果9个值中没有auto，则自动调整right以使等式满足
    • 如果有auto，则自动调整auto的值
    • 可以设置auto的值
      • margin，width，left，right
    • 因为left和right的默认值，所以如果不知道left和righ，则等式不满足时，会自动调整两个值
  • 垂直方向布局
    • top +margin-top/bottom+padding-top/bottom+border-top/bottom+height = 包含块的高度

6、元素的层级（z-index）

• 开启了定位的元素，可以通过z-index属性来指定元素的层级，
• 值越大，层级越高
• 如果元素的层级都一样，则优先显示靠下的元素
• 祖先元素的层级在高，也不会盖住后代元素