13 定位

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)

  • 相对定位:它自己本身

  • 固定定位:整个浏览器窗口