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

最新推荐文章于 2026-03-18 18:54:03 发布
原创 最新推荐文章于 2026-03-18 18:54:03 发布 · 382 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #浏览器 #float #class #div
本文详细解释了CSS中两种重要的定位方式：绝对定位（position: absolute）和相对定位（position: relative）。绝对定位使得元素相对于浏览器窗口进行定位，而相对定位则是相对于元素本身或最近的已定位祖先元素。通过具体示例展示了这两种定位方式的应用场景。

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

 


摘自http://zhidao.baidu.com/question/69984654

CSS属性详解——position:relative
Wod_7的博客
06-04 6797
CSS中的相对定位relative定位是一种定位方式，与绝对定位absolute定位不同的是，相对定位是根据元素在正常页面流中的位置来定位。相对定位使元素相对于其原始位置上下左右移动。这个过程并不会使元素脱离文档流。
CSS+DIV布局中absolute和relative的区别
weixin_30362801的博客
06-24 1471
来源 ：http://developer.51cto.com/art/201009/225201_1.htm 解释的很好。摘下来后面自己能看看。 区别：定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在，而定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。 position各个属性值的定义： 1、static：默认...
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
热门推荐
csgojingyu的博客
10-21 2万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
区分：position属性的absolute与relative
sweet___smile的博客
04-27 1331
每次遇到position属性都会去问下度娘,特此总结,方便查阅。 1.absolute是绝对定位，relative是相对定位。具体应该怎样理解，请看下文。 position:absolute：绝对定位，是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位。 ① 在没有设定TRBL，默认依据父级的做标原始点为原始点。 ② 设定T
position：absolute与relative的区别
Ven
05-28 1万+
Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 一般来讲...
css里面position:relative与position:absolute的区别
Have fun,Study hard,Be myself
04-02 722
position：absolute这个是绝对定位 是相对于浏览器的定位。 比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position：relative是相对定位 是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。 比如： 当1
CSS里面 Position：relative与 Position：absolute 区别
majunzhu的博客
03-30 323
转：https://zhidao.baidu.com/question/69984654.htmlposition：absolute这个是绝对定位；是相对于浏览器的定位。 比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position：relative是相对定位，是相对于前面的容器定位的。这个...
CSS中position:relative与position:absolute的区别；用通俗易懂的语言解释
weixin_46300114的博客
11-06 280
就像把一个元素放在网页上的一个具体坐标位置，就好像你在屏幕上放一个小纸条一样。这个位置是相对于网页上的某个容器（通常是父元素）而言的，而不是相对于其他元素。所以，"position: absolute" 是绝对定位，而 "position: relative" 是相对定位，它们用于控制元素在网页上的位置。也是在元素原来的位置上微调，但不会影响其他元素。就好像你有一叠纸，然后你在其中一张纸上移动一小段距离，但其他纸仍然保持原来的位置。
css中position：absolute与relative的区别
weixin_30544657的博客
02-16 75
http://blog.csdn.net/chen_zw/article/details/8741365 转载于:https://www.cnblogs.com/lzhicheng/p/8451267.html
零基础入门前端 彻底搞懂 CSS position 三大核心定位：relative/absolute/fixed 区别对比与实战指南
最新发布
见字如面，祝您早安，午安，晚安
03-18 679
相对定位是元素相对于自身在正常文档流中的初始位置进行偏移的定位方式，是三大定位中唯一不脱离文档流的定位类型。绝对定位会让元素完全脱离正常文档流，相对于最近的 position 值非 static 的祖先元素进行偏移；如果找不到符合条件的祖先元素，则最终相对于页面根元素 (html) 或浏览器视口定位。固定定位会让元素完全脱离正常文档流，默认相对于浏览器可视视口 (viewport)进行固定定位，无论页面如何滚动，元素始终保持在视口的指定位置不变。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值