CSS里面position：relative与position：absolute 区别

最新推荐文章于 2020-09-29 11:03:33 发布

akunamotata

最新推荐文章于 2020-09-29 11:03:33 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

文章标签： CSS 浏览器

本文链接：https://blog.youkuaiyun.com/akunamotata/article/details/83470522

本文详细解析了CSS中两种重要的定位方式：绝对定位（position: absolute）和相对定位（position: relative）。绝对定位使得元素相对于浏览器窗口进行定位，而相对定位则是相对于元素本身的位置进行调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position：absolute这个是绝对定位


是相对于浏览器的定位。

比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position：relative是相对定位


是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如：<div class="1"></div><div class="2"></div>

当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position：relative；margin-left:20px;width:50px;
2的位置在1的右边，距离120px