position中relative和absolute属性详解

本文详细解释了CSS中relative和absolute两种定位方式的区别与应用场景,包括它们如何影响页面布局及如何与其他属性配合使用。

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

看了这么多有关relative和absolute的属性介绍,我觉下面的最容易理解。

关于relative和absolute这段话更简洁

absolute:

absolute英文意思是绝对的意思,实际上是针对父级元素元素定位,且不占用父级元素其他位置(relative定位仍把原来的位置保留),

如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位,按照我们中国人的理解观念,这个其实是相对定位,是脱离文档流的。

注:1.  用了abolute属性,原有float属性将失效;

2.  网页居中使用absolute时,容易出错,因为居中事分辨率大小时自适应的,而absolute会以浏览器左上角为远点,不会因为分辨率变化而变化,很多人在这个问题上出错。


relative:

relative的英文意思是相对的意思,实际上是相对于对象当前位置的定位,但是原来的位置仍占据。而且是不脱离文档流的,就算用top、lef、bottom、right或margin将其移动位置,它也会在原来的文档流中占有自己实际大小的一块位置。

注:1.  relative参照父级元素原始点,无父级以body原始点为原始点

2.  父级中有padding,margin等时,原始点参照父级内容区原始点定位


其实,absolute是相对于父对象定位,relative是相对于当前位置定位!哈哈,弄懂了就是这么简单哟!


附加:

一些将position的连接

http://blog.youkuaiyun.com/marty_zhu/article/details/1910597

http://blog.youkuaiyun.com/yangdeli888/article/details/7730339

http://www.dreamdu.com/css/property_background-position/

http://www.cnblogs.com/bluewolfox/archive/2010/04/26/1721335.html

http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html

http://www.cnblogs.com/rainman/archive/2009/04/12/1433988.html

http://www.blueidea.com/tech/web/2009/7010.asp

http://www.jb51.net/web/77495.html

http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html

http://www.cnblogs.com/oneword/archive/2009/12/08/1619248.html



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值