css--定位

css-定位

• 定位
  • 相对定位：relative
  • 绝对定位：absolute
  • 固定定位：fixed　

• 相对定位
  • 定义：相对于自己原来的位置。
  • 使用效果
    • 1. 元素设置了相对定位后，还是标准文档流。
      2. 设置了相对定位后，可以使用四个方向的属性：top、bottom、left、right。
         通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
  • 相对定位的特点
    • 1. 不脱标（标准文档流）。
      2. 形影分离。
      3. 通过相对定位对元素进行移动后，原来的位置仍然保留。
      4. 设置相对定位后，元素的层级也会变高，会覆盖其他标准文档流元素。
  • 作用：
    • 1. 对元素的位置进行轻微调整。
      2. 做子类元素绝对定位的参考，（父相子绝）　
  • 补充：不要用相对定位来做遮盖现象。　

---

• 绝对定位　

　设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。　

• • 绝对定位使元素的位置与文档流无关，也就是说设置了决定定位，元素“脱标“因此不占据空间。
  • 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
  • 绝对定位的特点：
    1. 脱标。
    2. 做遮盖效果，提高了层级；
    3. 设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

　

• • 绝对定位参考点（重点）
    • 单独对一个盒子进行绝对定位的时候
      • 如果使用top属性进行描述的时候，参考点是以页面左上角为基准的。
      • 如果使用bottom属性进行描述的时候，参考点是以 首屏页面左下角为基准的。
      •