关于position定位布局的问题和理解

Posted 2022-10-11 铁锤妹妹@

问题

项目中有个position布局，祖父元素设置为relative，父元素设置为absolute，子元素相对谁定位呢？

理解

1. 子元素直接使用absolute绝对定位相对于父元素定位，position定位是以最近一层有定位属性元素来做参照的，例如祖父-父亲-儿子，三个都有position属性，祖父以上没有定位属性，那么祖父是以整个body为左上角（0,0）进行定位，父亲以祖父元素的左上（0,0），以此类推，儿子是以父亲左上角（0,0）定位。所以不管套多少个子元素，只要上一层有定位，子元素就能直接用绝对定位，以上一层的左上角（0,0）进行定位。
2. 总的来说，就是参照物的选择不同，relative相对定位是相对它自身原来的位置，absolute绝对定位参照物是它的父类。

以后遇到定位相关问题会持续在这里更新~