position里absolute和relative属性浅析

relative/相对定位

相对于其正常位置进行定位;
正常情况
relative位移

fixed/固定定位

相对于浏览器窗口进行定位,元素的位置通过TBLR进行定位;

absolute/绝对定位

相对于static 以外的第一个父元素进行定位;元素的位置通过TBLR进行定位;

如果父级没有设定position属性,则当前的absolute以浏览器左上角为原点并结合TBLR进行定位;
父级没有设定position属性

如果父级设定position属性,则当前的absolute以父级左上角为原点并结合TBLR进行定位;

父级position为absolute
父级position为absolute

父级position为fixed,当前的absolute也会随着父级的fixed属性固定在浏览器的某个位置
父级position为fixed

父级position为relative,则当前的absolute以父级左上角为原点并结合TBLR进行定位;
父级position为relative

元素的定位与padding无关,无论父级有无padding,都不影响子元素的定位

设置padding:20px;
padding:20px

没有设置padding
没有设置padding


  • 如果只是设置position,不加TBLR,元素还是显示在原来的位置,即position属性必须结合TBLR才有效;

猜你喜欢

转载自blog.csdn.net/YQRQR/article/details/51751039
今日推荐