在CSS中position: relative是什么意思?

 我来答
幻翼高达Zero
2019-05-26 · TA获得超过1.7万个赞
知道答主
回答量:499
采纳率:0%
帮助的人:8.2万
展开全部

在CSS中,“position: relative”是设置定位类型为相对定位,它可以配合“top”、“bottom”、“left”、“right”这4个偏移量来实现相对它所属父元素的相对定位。

position属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

relative属性相对比较简单,它是相对它所属父元素来进行偏移的,可以通过“top”、“bottom”、“left”、“right”4个偏移属性进行定位。

扩展资料:

position属性的其它定位类型:

1、absolute

绝对定位,依据父元素中最近设置为relative定位类型的元素进行偏移。

2. fixed

fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。

3. static

position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。

参考资料来源:百度百科-position (定位元素)

手机用户59595
推荐于2017-09-25 · 超过71用户采纳过TA的回答
知道答主
回答量:114
采纳率:0%
帮助的人:165万
展开全部
css中position: relative的意思是: 相对定位,对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。 位置属性被设置为relative之后,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。它可以随窗口大小变化。但大小仍然不会变。要是你设置成width:100%;height:100%;这样就会随着窗口变大变小。 比如:<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. 当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时,只有left起作用。 希望以上的回答能够帮到你!
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友6b46965
推荐于2017-10-05 · TA获得超过5583个赞
知道小有建树答主
回答量:957
采纳率:84%
帮助的人:425万
展开全部
相对定位,对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。

位置属性被设置为relative之后,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。它可以随窗口大小变化。但大小仍然不会变。要是你设置成width:100%;height:100%;这样就会随着窗口变大变小。
比如:<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.

当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时,只有left起作用。

参考链接: http://www.studyofnet.com/news/157.html
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式