相对布局和绝对布局
position属性有四个值,static(默认值),fixed,relative(相对)和absolute(绝对)。
relative是相对于当前位置进行定位,如果将top和left设为0,那么就是当前的位置,并且relative不脱离文档流占据位置:
如图中这两个盒子一开始设置为相对布局top与left都设为0,结果和没设置定位的位置一样;
absolute是基于父元素来定位,并且脱离文档流不占据位置,所以父元素也要设置position,不然会脱离父元素
如图所示,将红色盒子设为absolute,top=0=left,蓝色盒子不设置定位,红色盒子浮动到了蓝色盒子上方;
fixed是以浏览器窗口来定位,并不依赖于父元素,同样也脱离文档流,不占据位置:
可以看到将粉盒子设为fixed后脱离了html元素,只相对于窗口定位;
注意:如果仅仅只设置了position,没有设置top或left此类的具体定位,元素只会在当前位置发生变化,如果是relative则没有变化,absolute和fixed则只是脱离文档流,浮在当前位置的上方,下方的元素则会移动到该位置;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步