初中物理就学过,位置是相对的,要有参照物,因此,所有定位都是相对参照物的定位。
position 属性:
规定元素的定位类型,该属性的可选值有static、relative、absolute、fixed、inherit。定义了position属性后,经常还要定义相对参照物的偏移量,即left,right,top,bottom属性值,当然,也可以不定义,那样的话,就是在参照物的位置上。
float属性:
Z-index属性:
上面的定位都在是二维空间做的,定位过程中有可能出现元素部分重叠的情况,这种情况下,谁覆盖谁呢,由此引用了Z-index属性,来指定元素的层次。注意:static定位的元素,其Z-index恒等于0,无法修改;另外,Z-index属性只能用于position=relative/absolute/fixed这些已经在二维空间定位过的元素。
属性 | 值 | 定位参照物 |
是否仍占据文档流的位置 |
描述 |
---|---|---|---|---|
position | static |
由文档流自然形成 |
是 |
默认值,,无需显式定义。元素出现在正常的流中(忽略 top, bottom, left, right, z-index 声明)。 |
relative |
相对自己在文档流中的位置 |
是,该元素在文档流中占据的空间不会释放 |
生成相对定位的元素,相对于其文档流位置进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
absolute |
相对第一个定位过的父元素,即position=relative/absolute/fixed的父元素,(static定位过的父元素不算) |
否,已经脱离文档流 |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
fixed |
相对浏览器窗口 |
否,已经脱离文档流 |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
inherit | 继承父元素的定位类型 | 由父元素的定位类型来确定 | 规定应该从父元素继承 position 属性的值。 | |
float | left、right、none、inherit | 相对父元素(不论是否定位过)和前一个浮动框 | 否,已经脱离文档流 | 浮动的框只能向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止 |