css里的position的static|relative|absolute|fixed的区别

前提:仅以div块为例,其它不清楚
注:1.下面截图看起来不是从页面左上角位置开始,是因为body元素有默认的margin,有边框
2.当position不是static时,top和bottom需要指定一个(不指定有默认值),left和right需要指定一个(不指定有默认值),top优先级高于bottom,left优先级高于right

  • 默认position:static,div是块类型元素,不管它有多宽,都会直接占一行。此时top,bottom,left,right属性即使设置了也不会生效

  • position:relative,相对于自己的默认位置而言的,也就是相对自己position:static时的位置

  • position:absolute,相对于自己的非postion:static的父元素(可以是祖父,祖祖父等)的位置

  • position:fixed,相对于整个浏览器

    参考博客:https://blog.csdn.net/u013848401/article/details/52422727

posted @ 2023-05-24 07:44  ControlO_o  阅读(17)  评论(0编辑  收藏  举报