position属性:absolute与relative的区别

转载 2015年07月08日 17:00:42
如果用 position来布局页面,父级元素的position 属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding 的属性影响,当然你也可以用 position,不过到时候计算的时候不要忘记 padding 的值。”



任何元素的默认position 的属性值均是static,静态。今天51RGB Q群186242343主要讲relative(相对)以及absolute(绝对)。

【position:absolute】
意思是:他的意思是绝对定位,他默认参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,有以下属性:
1)如果没有TRBL,以父级的左上角,在没有父级的时候,他是参照浏览器左上角,如果在没有父级元素的情况下,存在文本,则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字,覆盖于上方。
2)如果设定TRBL,并且父级没有设定position 属性,那么当前的absolute 则以浏览器左上角为原始点进行定位,位置将由TRBL 决定。
3)如果设定TRBL,并且父级设定position 属性(无论是absolute 还是relative),则以父级的左上角为原点进行定位,位置由TRBL 决定。即使父级有Padding 属性,对其也不起作用,说简单点就是:它只坚持一点,就以父级左上角为原点进行定位,父级的padding对其根本没有影响。

以上三点可以总结出,若想把一个定位属性为absolute 的元素定位于其父级元素内,只有满足两个条件,
第一:设定TRBL
第二:父级设定Position 属性
上面的这个总结非常重要,可以保证你在用absolue 布局页面的时候,不会错位,并且随着浏览器的大小或者显示器分辨率的大小,而不发生改变。
只要有一点不满足,元素就会以浏览器左上角为原点,这就是初学者容易犯错的一点,已经定位好的板块,当浏览器的大小改变,父级元素会随之改变,但是设定Position 属性为

absolute 的板块和父级元素的位置发生改变,错位了,这就是因为此时元素以浏览器的右上角为原点的原因。
初学者很容易犯错的是,不清楚Position 属性为absolute 的板块,若想定位到父级板块中,并且当浏览器的大小改变或显示器的分辨率改变,布局不发生改变,是需要满足两个条件的,只要有一点不满足,元素就会以浏览器左上角为原点,从而导致页面布局错位。


【position:relative】
意思是相对定位,他是默认参照父级的原始点为原始点,无父级则以文本流的顺序在上一个元素的底部为原始点,配合TRBL 进行定位,当父级内有padding 等CSS 属性时,当前级的原始点则参照父级内容区的原始点进行定位,有以下属性:
1)如果没有TRBL,以父级的左上角,在没有父级的时候,他是参照浏览器左上角(到这里和absolute 第一条一样),如果在没有父级元素的情况下,存在文本,则以文本的底部为原始点进行定位并将文字断开(和absolut 不同)。
2)如果设定TRBL,并且父级没有设定position 属性,仍旧以父级的左上角为原点进行定位(和absolut 不同)
3)如果设定TRBL,并且父级设定position 属性(无论是absolute 还是relative),则以父级的左上角为原点进行定位,位置由TRBL 决定(前半段和absolut 一样)。如果父级有Padding 属性,那么就以内容区域的左上角为原点,进行定位(后半段和absolut 不同)。

以上三点可以总结出,无论父级存在不存在,无论有没有TRBL,均是以父级的左上角进行定位,但是父级的Padding 属性会对其影响。
综合上面对relative 的叙述,我们就可以将position 属性为relative 的DIV 视成可以用TRBL 进行定位的的普通DIV,或者说只要将我们平时布局页面的div 的CSS 属性中加上position:relative 后,就不只是用float 布局页面了,还可以用TRBL 进行布局页面了,或者说加上position:relative 的DIV 也可以像普通的DIV 进行布局页面了,只不过还可以用TRBL进行布局页面。但是position 属性为absolute 不可以用来布局页面,因为如果用来布局的话,所有的DIV 都相对于浏览器的左上角定位了,所以只能用于将某个元素定位于属性为absolute 的元素的内部某个位置,这样我们就可以总结比较重要的结论既然属性为absolute 的元素用来定位某元素在父级中位置,就少不了TRBL,这时候根据一开始讲的absolute 的第三条,如果父级元素没有
position 属性那么absolute 元素就会脱离父级元素,但是如果是布局页面,父级元素position 的属性又不能为absolute,不然就会以浏览器左上角为原点了,所以父级元素的position 属性只能为relative!

属性为relative 的元素可以用来布局页面,属性为absolute 的元素用来定位某元素在父级中的位置

总结:如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响,当然你也可以用position,不过到时候计算的时候不要忘记padding的值。
但是定位(position)有一个缺点,不会自适应内部元素的高度,所以平时我们在布局页面的时候,如果某个或者某些模块高度永远不变,就可以用定位,但是帆建议大家布局页面的时候,还是要以Float 为主,Position 为辅!这样你才能做出高质量的页面。

最后,请大家记住我这句话:“布局页面,Float为主 ,Position为辅!”

position定位属性中absolute和relative的区别

提问:如果页面内某个元素没有设定position属性,那么他是否具有position属性? 回答:具有position属性,并且属性值是static。原因在于网页里任一元素的默认position属性...
  • qq_17767355
  • qq_17767355
  • 2016年04月04日 15:35
  • 1887

HTML之position:absolute relative static fixed的区别和理解

HTML之position:absolute relative static fixed的区别 在理解position:absolute relative static fixed的区别时,我们先需...
  • guyuealian
  • guyuealian
  • 2016年02月24日 18:58
  • 3792

position:relative与position:absolute的定位区别

CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给...
  • sunny327
  • sunny327
  • 2014年07月22日 17:44
  • 3048

理解网页制作中position属性之absolute与relative的区别

理解网页制作中position属性之absolute与relative的区别 作者:http://www.51rgb.com   如果用 position来布局页面,父级元素的position ...
  • bushini123
  • bushini123
  • 2014年10月17日 11:23
  • 881

CSS中position属性值relative与absolute区别

背景:     在做网页设计时,需要定位HTML元素位置时,势必要使用到CSS样式position值relative、absolute。 样例: A B ...
  • chhuma
  • chhuma
  • 2012年04月21日 19:57
  • 4678

position:relative和float的区别

postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而...
  • xianyu410725
  • xianyu410725
  • 2014年12月29日 10:06
  • 1032

理解 position:relative 与 position:absolute

有三个值, static (静态)、 relative (相对)、 absolute (绝对);由于 static 是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定...
  • elf8848
  • elf8848
  • 2014年10月09日 10:32
  • 981

javascript position属性absolute与relative 详解

position属性absolute与relative 详解 转自:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html...
  • ysdaniel
  • ysdaniel
  • 2012年09月25日 12:00
  • 6092

position的值relative和absolute的定位原点是?

relative(相对定位):定位原点是元素本身所在位置; absolute(绝对定位):定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上...
  • sjinsa
  • sjinsa
  • 2017年04月26日 19:57
  • 1923

position:relative和position:absolute的区别及用法

这几天在做项目时遇到做选项卡的功能时,标题和内容区域的背景颜色不同,且需要选到当前标题时,此标题下面会出现下边框及小三角边框,这样就会超出标题背景颜色需覆盖下面内容区域,这时就需要用到potition...
  • sunny327
  • sunny327
  • 2014年11月06日 09:47
  • 1457
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:position属性:absolute与relative的区别
举报原因:
原因补充:

(最多只允许输入30个字)