CSS/Properties/position

position

The position property specifies the positioning algorithms for elements.
Description

Values static | relative | absolute | fixed | inherit
Initial value static
Applies to All elements
Inherited No

Values

static

The box is a normal box, laid out according to the normal flow. The ‘top’, ‘right’, ‘bottom’, and ‘left’ properties do not apply.

relative

The box’s position is calculated according to the normal flow. Plus, the ‘top’, ‘right’, ‘bottom’, and ‘left’ properties apply.

absolute

The box is taken out of the normal flow. The box’s position (and possibly size) is specified with the ‘top’, ‘right’, ‘bottom’, and ‘left’ properties.

fixed

According to the ‘absolute’ model, the box is taken out of the normal flow but does not move when scrolled. The box’s position is specified with the ‘top’, ‘right’, ‘bottom’, and ‘left’ properties.

inherit

Takes the same specified value as the property for the element’s parent.

中文释义：

static(静态)

没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级，这是默认值。

relative(相对定位)

对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

absolute(绝对定位)

脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

fixed（固定定位）

这里所固定的参照对像是 可视窗口 而并非是body或是父级元素，其总是固定在浏览器窗口的某个位置，并且不受滚动的影响，是绝对的坐标定位。可通过z-index进行层次分级。

注 ：

CSS中定位的层叠分级： z-index: auto | namber;

auto 遵从其父对象的定位
namber 无单位的整数值。可为负数，默认值为0，越大越靠上，值大的元素会覆盖住值小的元素。