HTML中元素的定位方式

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

初中物理就学过，位置是相对的，要有参照物，因此，所有定位都是相对参照物的定位。

position 属性：

规定元素的定位类型，该属性的可选值有static、relative、absolute、fixed、inherit。定义了position属性后，经常还要定义相对参照物的偏移量，即left，right，top，bottom属性值，当然，也可以不定义，那样的话，就是在参照物的位置上。

float属性：

规定元素是否浮动，其实，这个属性也是定位的一种类型，但搞不懂为什么它没有出现在position可选值中，而非要做成一个单独的属性，比较可能的原因是，在position的可选值中（static除外），是指定相对参照物的具体偏移量——left，right，top，bottom，而浮动指定的不是具体的偏移量，而只是偏移方向而已，浮动的框只能向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。因此两种定位方式没法统一起来。

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	相对父元素（不论是否定位过）和前一个浮动框	否，已经脱离文档流	浮动的框只能向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止