13.1 绝对定位

position:absolute

  • 脱离文档流
  • 可以设置参照物，参照物必须是其父级元素(直系父级)，如果直接父级没有会一直往上查，直到找到最外层的根元素为止
  • 有宽度和高度的情况下，top和bottom同时有值，top生效，left和right同时有值，left生效

  • 没有段杜和高度的情况下，top和bottom同时设置值的情况下，会将在这个盒子拉大，上下值都起作用，左右同理。

    13.2 相对定位

    position:relative

  • 不会脱离文档流 占位 所有后面的元素不会往前跑

  • 可以设置上下左右四个方位
    • 如果同时设置top和bottom同时有值，top生效
    • 如果同时设置left和right同时有值，left生效
  • 参照物自己本身
  • z-index 必须和定位元素(绝对，相对，固定)同时使用才起作用

13.3 固定定位

position:fixed

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

13.4 定位的不同点和不同点

13.4.1 相同点

  • 可以top/bottom/left四个方位，如果同时有top，bottom只有top作用,如果同有left、right、只有left起作用

  • 都设置z-index改变层级 而且z-index越大 越在上

    13.4.2 不同点

  • 是否脱离文档流

    • 绝对定位:是
    • 相对定位:否
    • 固定定位:是

      只有相对定位没有脱离文档流，绝对和固定定位都会脱离文档流 不占位

  • 参照物

  • 绝对定位:是觉有定位元素的父级元素，如果直接父级没有定位元素，则会往上级知道找到我们的根元素html为止 绝对定位元素 一定给他的直接父级元素相对参照物(postion:relative)
  • 相对定位:它自己本身
  • 固定定位:整个浏览器窗口