HTML定位方式

最新推荐文章于 2023-08-30 20:03:26 发布

护你一世无怨.メ

最新推荐文章于 2023-08-30 20:03:26 发布

阅读量242

点赞数

本文链接：https://blog.csdn.net/qq_45260446/article/details/100672669

版权

本文介绍了HTML中的四种定位方式：相对定位、绝对定位、固定定位和粘性定位。相对定位不脱离文档流，保持原有位置；绝对定位脱离文档流，以父元素或窗口为原点定位；固定定位同样脱离文档流，基于浏览器窗口定位；粘性定位则在滚动时停留在窗口特定位置。定位后可能引发重叠，可通过z-index调整层次。

摘要由CSDN通过智能技术生成

position: relative;相对定位
相对定位不会脱离文档流，保持流式布局中的位置
position:absolute;绝对定位
1. 绝对定位会使标签脱离文档流，丢失在流式布局中的位置
2.设置坐标之前，标签会在原来的地方，和其他标签重叠
3.设置left,top坐标之后，默认网页左上角为原点定位
4.如果父标签设置了定位，那么就以父标签坐上角为原点定位
5.块标签脱离文档流之后，宽度不在是100%，而不是以内容为准
position: fixed;固定定位
1.固定定位使标签脱离文档流，丢失宽度，丢失位置
2.固定定位以浏览器显示窗口的某一个角为坐标原点定位
position: sticky;粘性定位
粘性定位不会脱离文档流
使标签在网页滚动时停止在离窗口顶部一定距离的位置
总结: 绝对定位和固定定位会使标签脱离文档流，而相对和粘性定位不会脱离文档流
标签定位之后，往往会发生重叠现象，不同的标签重叠就会有层次
问题，可以使用z-index这个样式来调节标签的层级，默认都是0
z-index只对定位标签起效，非定位标签无效

         <h1>相对定位</h1>
       <div id="relative">
           <span>441</span>
           <span>das</span>
           <span>vzz</span>
           <span>7787</span>
       </div id="absolute">