理解 position:relative 与 position:absolute
2014-10-09 10:32
134 查看
<!----><!----><!----><!---->
<!---->
有三个值,
static
(静态)、
relative
(相对)、
absolute
(绝对);由于
static
是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定义。
对于后两者,一般应用:在一个相对定位的元素里面放置一个绝对定位的元素,如图:
子元素
B
可以通过
top
、
right
、
bottom
、
left
来精确定位,定位的参考目标就是其具有相对定位属性的父级元素
A
;并且设置这些偏移后,产生的空隙会被后面的元素填充(如果后面的元素足够尺寸的话)。由于
B
元素具有
absolute
定位属性,相当于从文档流中抽取出来,浮动在原平面排版上,形成“层”,如果有多个“层”,层与层之间就必然会有谁覆盖谁,谁在上谁在下的竞争关系,因此,为解决这个竞争,就产生了
z-index
(空间坐标系的
Z
轴)
属性,谁的值大,谁就在上面。另外,如果父级元素
A
没有设置
relative
,那么
B
元素就会以
body
标签当作参考点。
对于具有
position:relative
属性的元素
A
,其
top
、
right
、
bottom
、
left
四个方向的位置偏移就会以该元素的原来位置作为参考点,而不是像上面说的,以具有
relative
定位属性的父级元素或
body
作为参考点。在设置了偏移后产生了空隙,其周围的元素并不会填充这些空隙,即使它们足够尺寸
(演示
)
。值得注意的是,此时元素
A
的
margin
,
margin
将作用于该元素的原来位置,由于原位置产生偏移,该元素的最终位置将是
margin
与
top
、
right
、
bottom
、
left
共同作用后的位置,并且其周围元素的位置也将产生影响。
回过头来再看看
relative
里面的
absolute
,比如上面的
A
、
B
两个元素,如果两个元素都设置了
top
、
right
、
bottom
、
left
,对于元素
B
来说,其位置偏移的参考点是元素
A
偏移后的位置,不是元素
A
的原位置,同样,如果元素
B
有
margin
,其参考点也是元素
A
偏移后的位置,这点很重要,这才是
absolute
的概念
<!---->
有三个值,
static
(静态)、
relative
(相对)、
absolute
(绝对);由于
static
是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定义。
对于后两者,一般应用:在一个相对定位的元素里面放置一个绝对定位的元素,如图:
子元素
B
可以通过
top
、
right
、
bottom
、
left
来精确定位,定位的参考目标就是其具有相对定位属性的父级元素
A
;并且设置这些偏移后,产生的空隙会被后面的元素填充(如果后面的元素足够尺寸的话)。由于
B
元素具有
absolute
定位属性,相当于从文档流中抽取出来,浮动在原平面排版上,形成“层”,如果有多个“层”,层与层之间就必然会有谁覆盖谁,谁在上谁在下的竞争关系,因此,为解决这个竞争,就产生了
z-index
(空间坐标系的
Z
轴)
属性,谁的值大,谁就在上面。另外,如果父级元素
A
没有设置
relative
,那么
B
元素就会以
body
标签当作参考点。
对于具有
position:relative
属性的元素
A
,其
top
、
right
、
bottom
、
left
四个方向的位置偏移就会以该元素的原来位置作为参考点,而不是像上面说的,以具有
relative
定位属性的父级元素或
body
作为参考点。在设置了偏移后产生了空隙,其周围的元素并不会填充这些空隙,即使它们足够尺寸
(演示
)
。值得注意的是,此时元素
A
的
margin
,
margin
将作用于该元素的原来位置,由于原位置产生偏移,该元素的最终位置将是
margin
与
top
、
right
、
bottom
、
left
共同作用后的位置,并且其周围元素的位置也将产生影响。
回过头来再看看
relative
里面的
absolute
,比如上面的
A
、
B
两个元素,如果两个元素都设置了
top
、
right
、
bottom
、
left
,对于元素
B
来说,其位置偏移的参考点是元素
A
偏移后的位置,不是元素
A
的原位置,同样,如果元素
B
有
margin
,其参考点也是元素
A
偏移后的位置,这点很重要,这才是
absolute
的概念
相关文章推荐
- HTML之position:absolute relative static fixed的区别和理解
- 理解 position:relative 与 position:absolute
- 深入理解position 的absolute和relative属性的区别
- HTML之position:absolute relative static fixed的区别和理解
- 理解 position:relative 与 position:absolute
- {转摘}理解 position:relative 与 position:absolute
- 理解position:relative 与 position:absolute
- z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.
- CSS中position属性的理解,相对位置relative,绝对位置absolute,固定fixed,页脚固定的实现2种方法
- 理解 position:relative 与 position:absolute
- 关于通过jquery来理解position的relative及absolute
- 理解position:relative 与 position:absolute
- 理解position:relative 与 position:absolute
- 深入理解position:relative 与 position:absolute(divb相对于diva进行绝对定位)
- 通过案例理解position:relative和position:absolute
- Html position中的 absolute relative static fixed的区别和理解
- position属性absolute与relative 详解
- HTML&CSS——Position属性四个值:fixed、absolute和relative的区别和用法
- position属性absolute与relative
- position属性absolute与relative