html定位问题

  1. 相对定位:

    相对于自己以前在标准流中的位置来移动

    需要注意的是:

    1)相对定位是不脱离标准流的,也就是说会继续在标准流中占用一份空间

    2)同一个方向上定位属性只能用一个

  2. 绝对定位:

    相对于body来定位

    注意:

    1)绝对定位是脱离标准流的

    2)默认情况下是相对于body来定位的,参考点就是body。但是如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,那么就会以祖先元素作为参考点

    3)如果有多个祖先元素,并且这些祖先元素都是定位流,那么会以离它最近的那个定位流的祖先元素作为参考点

    4)如果以body作为参考点,需要注意的是这个参考点仅仅是当前网页。比如网页有滚动条,那么right=0,bottom=0并不是把这个元素放到滚动条最下面最右边那个位置,而是放到当前页面的最右边最下面,你如果控制滚动条那个位置是不变的

    5)绝对定位元素会忽略祖先元素的padding

  3. 子绝父相

    因为相对定位会继续在标准流中占空间,而绝对定位以body作为参考点的话只是以当前界面来确定。所以这两个定位方法都有缺陷,为了解决这个问题,我们需要将两个定位方法结合起来使用

    子绝父相的意思就是子元素用绝对定位,父元素用相对定位


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!