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

最新推荐文章于 2020-09-29 11:03:33 发布
最新推荐文章于 2020-09-29 11:03:33 发布
阅读量345 收藏
点赞数
分类专栏： CSS 文章标签： css 浏览器 float class div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/softness202/article/details/6046001
版权

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和overflow:hidden之间的问题
09-25
`position`属性用于定义元素的定位模式，它有多种值，如`static`（默认值）、`relative`、`absolute`、`fixed`和`sticky`。当`position`设置为`relative`时，元素保持其正常流中的位置，但可以通过`top`和`left`等...
CSS中的position:relative;的作用示例介绍
12-10
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何在页面上定位。在你的问题中，你特别关注了`position:relative;`的作用，这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`...
通过案例理解position:relative和position:absolute
weixin_34293141的博客
09-17 338
w3school过了HTML的知识之后，觉得要自己单纯地去啃知识点有点枯燥，然后自己也很容易忘记，所以便找具体的网站练手便补上不懂的知识点。position:relative和postion:absolute困扰了我快一个星期之久，网上找到的资料鱼龙混杂，刚确定“这样”的理解之后，看另一份资料，发现“这样”理解是错了，就这样不断更正，并记...
CSS 中 Position relative 和 absolute区别
happylong123hehe的专栏
12-26 392
Relative Positioning A relative positioned element is positioned relative to its normal position. The reserved space for the element is still preserved in the normal flow. relative 位置是相对元
position的relative与absolute的区别
shenmegui223的专栏
03-27 835
一直对position的relative（相对）和absolute（绝对）搞不太清，今天花了一天时间也算搞清楚了那么一些些。      相对定位：relative 没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位，其原始占位信息仍存在。因此，移动元素会导致它覆盖其他框      绝对定位：absolute 脱离了文档流与浮动模型，独立于其他对象而存在，没有占位.      
position relative和absolute区别
weixin_30922589的博客
01-10 134
看这个博客 说的很详细http://blog.sina.com.cn/s/blog_647a022e0101b2gn.html 总的来说 这两个属性都是通过增加left和right偏离原来的位置 但是relative仍然保留了原先位置的占位 但是absolute没有 原先位置不占位其他元素会补上 最主要的区别 看原文这句话 对于absolute定位的层总是相对于其最近的定义为absolu...
css position: absolute、relative详解
10-30
总结来说，position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档...
position:relative/absolute无法冲破的等级
10-31
通过对`position:relative`与`position:absolute`的理解和应用，我们可以解决许多复杂的布局问题。本文介绍的问题只是CSS布局中常见挑战之一，通过适当调整CSS属性和HTML结构，可以有效克服这些问题，确保页面布局...
position里relative与absolute的一些区别
zerobaek的博客
10-11 644
position：relative，position：absolute配合top，bottom，left，right使用时定位的差别：
position:relative与position:absolute区别（示例展示）
xubuhui的博客
11-25 346
在做一些demo的时候始终都分不清这两者的使用区别，也困扰了很久，今天下决心一定要弄清楚。 relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。如果将to...
position:relative和absolute的区别、应用
XY坐标
04-09 181
position 有三个值，static（静态）、relative（相对）、absolute（绝对）；由于static是所有页面元素的默认值，因此设置元素的定位类型时几乎不用这个值，除非用于覆盖之前的定义。 对于后两者，一般应用：在一个相对定位的元素里面放置一个绝对定位的元素，如图： [img]http://blog.donews.com/images/blog_donews_com/kurt...
关于position:relative和position:absolute的区别
qq_36060786的博客
02-11 1025
1.相同点：都属于定位方式，可以设置定位属性top/bottom/left/right2.不同点：（1）relative:（相对定位）：相对于自身原来所在位置进行定位，如果不对top/bottom/left/right进行设置（默认为left:0, top: 0），那么该元素将保持在原定位置，如果对上述4个参数进行设置，那么该元素将相对自身原来位置进行移动，但是它的移动并不会对其他的元素造成影响，...
position中的absolute与relative的区别
weixin_43417682的博客
09-29 1643
Position（位置）属性值需要注意的地方 position的属性有： Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位 Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动 Relative：相对定位，是相对于其原本的位置来定位的 Static：默认值，没有定位 Inherit：继承父元素的position值。 absolute和relative的区别 relative设置的div宽度和父类的div宽度相同，所以给
js中position：relative与position：absolute 区别
LuckySummer*
07-13 3408
1、position：absolute这个是绝对定位；是相对于浏览器的定位。 比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。 比如： 当1固定
绝对定位和相对定位
凤舞九天
03-09 351
[url]http://webteam.tencent.com/?p=328[/url]，非常优秀的介绍绝对定位和相对定位的区别与关系。 概要： 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。(本文的示例，请看这个附件demo。...
CSS 绝对定位和相对定位
weixin_30763455的博客
04-04 89
CSS定位属性：一个定位属性，需配合四个定位坐标，实现定位 固定定位fixed 说明： 1、固定定位是相对于"浏览器窗口" 2、如果只设置了定位属性，未指定定位坐标时，元素将停留在它原来的位置 设置固定定位的步骤； 1、设置position：fixed（表示固定定位） 2、确定偏移量 left：距离左边多远。 right：距离右边多远。 top：距离顶边多远。 bottom：...
css中position: relative;是什么意思
最新发布
03-12
<think>好的，用户想了解CSS中position: relative的含义和用法。首先，我需要回忆相关知识，确保正确性。记得position属性有几个值，其中relative是相对定位，但具体细节可能需要查证。 根据参考引用里的资料，position属性用于元素定位，relative是其中一个取值。我记得相对定位的元素会相对于其正常位置进行偏移，但不会脱离文档流。这点很重要，因为它与absolute不同，absolute会找最近的定位祖先元素。 接下来要确认relative的使用场景。比如，微调元素位置，或者作为absolute子元素的定位上下文。需要举例说明，比如稍微移动图标位置，或者作为父容器让子元素绝对定位。 还要注意，设置relative后，使用top、right等属性进行偏移，但原来的空间仍然保留，周围的元素不会重新排列。这点需要强调，避免用户误解。 检查是否有常见错误，比如忘记设置父元素为relative导致absolute定位基于其他元素。可能需要提醒用户在使用子元素absolute时，父元素需要设置为relative，否则会向上寻找直到根元素。 然后，根据用户提供的引用，引用[1]提到position属性实现精准控制，引用[2]提到relative的实例分析。需要正确标注引用来源，确保引用标识正确。 最后，生成相关问题，可能需要包括其他position值，如absolute、fixed的区别，或者常见布局问题。确保问题与主题相关，帮助用户深入理解。</think>### CSS position: relative 解释及使用场景 #### 一、position: relative 的核心含义 `position: relative` 表示**相对定位**，元素会**基于自身原本在文档流中的位置进行偏移**，且偏移后**不会脱离文档流**（即原始占位空间仍保留）[^1]。例如： ```css .box { position: relative; top: 10px; left: 20px; } ``` 此时元素会从原本位置向下移动10px、向右移动20px，但其他元素仍会按它未移动时的位置进行布局。 #### 二、关键特性解析 1. **坐标系基准点** 偏移属性（`top/right/bottom/left`）的参照物是**元素原本的位置**。例如 `top: 10px` 表示向下移动10px（注意与直觉相反的方向定义）。 2. **文档流保留** 即使元素发生偏移，其原始占位空间仍然存在，周围元素不会重新排列[^2]。 3. **创建定位上下文** 当父元素设置为 `position: relative` 时，其子元素的 `position: absolute` 会**以该父元素为基准进行定位**，这是实现精准定位的经典组合方式。 #### 三、典型使用场景 1. **微调元素位置** ```css /* 图标位置微调 */ .icon { position: relative; top: -2px; /* 向上微调2像素 */ } ``` 2. **作为绝对定位的父容器** ```html <div class="parent" style="position: relative"> <div class="child" style="position: absolute; top: 0; left: 0"></div> </div> ``` 3. **覆盖效果控制** ```css .badge { position: relative; z-index: 1; /* 通过z-index控制层级 */ } ``` #### 四、对比其他定位方式 | 定位类型 | 参照物 | 文档流影响 | 典型场景 | |----------------|----------------------|--------------|--------------------------| | relative | 自身原始位置 | 保留占位 | 微调、创建定位上下文 | | absolute | 最近定位祖先元素 | 完全脱离 | 弹窗、自定义图标位置 | | fixed | 视窗 | 脱离文档流 | 固定导航栏、悬浮按钮 | | sticky | 视窗+父容器 | 条件性脱离 | 吸顶效果 |
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值