HTML元素定位方式——相对定位、绝对定位、固定定位、浮动定位

最新推荐文章于 2024-04-19 15:59:41 发布

Elltor

最新推荐文章于 2024-04-19 15:59:41 发布

阅读量5.1k

点赞数 2

分类专栏：前端文章标签：相对定位绝对定位 HTML CSS

本文链接：https://blog.csdn.net/weixin_43217942/article/details/100076509

版权

本文详细探讨了HTML元素的四种定位方式：静态定位、相对定位、绝对定位和固定定位。静态定位遵循文档流，相对定位保持元素原有位置基础上偏移，绝对定位相对于最近的已定位祖先元素定位，而固定定位则相对于浏览器窗口定位，不受滚动影响。理解这些定位方式对于网页设计和布局至关重要。

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

布局排版是网页设计的基础，熟练使用各种定位写起网页来会更得心应手。

当添加一个HTML元素，不设置定位方式默认为静态定位（position：static），静态定位属于文档流（排列方式就像文本，一行一行排列，文字多出会换行）。

相对定位（position：relative）是相对于自己之前的位置进行定位，如果不改变top、bottom、left、right与文档流元素无差别。

ps：小技巧，在调整网页的细节时，常常将父元素的定位设置为相对定位，子元素设置绝对定位（子绝父相）。

绝对定位（position：absolute）是相对上级相对定位元素或绝对定位元素进行定位，如果上级元素没有设置定位，则会相对于body进行定位。

**特点对比**
相对定位	绝对定位

关注