CSS定位

• 相对定位-position: relative;

  • 没有脱离文档流
  • 参照物是元素本身位置
  • 当top和bottom同时有值的情况下，top值生效，支持负值
  • 当left和right同时有值的情况下，left值生效，支持负值
  • 任何元素都可以设置相对定位属性
  • 相对定位元素位移发生改变，但元素原来的位置还会被占用，其他元素还是正常识别这个元素原来的位置

• 绝对定位-position: absolute;

  • 脱离文档流
  • 可以设置参照物，参照物必须是其父级元素（直系父级），如果没有直接父级会一直往上查找直到找到最外层的根元素为止；
  • 有宽度和高度的情况下，top和bottom同时有值，top生效；left和right同时有值，left生效。
  • 没有宽度和高度的情况下，top和bottom同时设置值的情况下，会将这个盒子拉大，上下值都起作用，左右同理。
  • 可以设置层级关系z-index属性，必须要和定位元素（绝对，相对，固定）同时使用，才会起作用。
  • 一个元素定位在另一个元素上或者两个元素叠加的情况，都可以使用定位（绝对定位）
  • 绝对定位一定要设置相对参照物

• 固定定位-position: fixed;

  • 脱离文档流
  • 参照物是浏览器的可视窗口
  • 任何元素都可以设置固定定位
  • 可设置top/bottom/left/right四个方位
  • 可通过z-index改变层级

• z-index属性的特点

  • 默认是书写顺序在后的定位元素覆盖顺序在前的定位元素
  • 可以使用z-index属性修改定位元素的层级关系
  • 所有定位元素的z-index默认值都一样
  • z-index值是数字没有单位，支持负数
  • 一般都是同级元素进行层级的比较
  • 当参照物是相对定位或绝对定位的时候，父级元素之间没有z-index值，子元素的z-index值进行比较