absolute和relative定位

628 阅读1分钟

「这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

定位规则

relative依据自身定位

absolute依据最近一层的元素定位

定位元素

  • absolute relative fixed

  • body

如果absolute上面有rekative/fixed元素的话,就依据他俩定位 没有的话就只能依据body定位


原始状态:

image.png

image.png

image.png


给relative加上top和left属性之后:

image.png

image.png

relative找上一层依据body定位


给absolute加上left和top属性之后:

image.png

image.png

absolute在上一层的relative框内移动

“子绝父相”


把relative属性注释之后

image.png

image.png

把relative属性注释之后

relative本来的left和top失去效果, 位置还原

对于absolute,向上找, 本应找relative(但他已经无了)

因此找到body 依据body定位