CSS布局之定位布局

定位布局(Position)指元素可以脱离原来的位置，定位到页面中的任意位置。

定位布局以内边距(padding)区域的左上角为定位原点，分为相对定位(包括static及relative)和绝对定位(包括absolute及fixed)。

1. 静态定位(static)

静态定位是默认的文档布局方式，表现为从左到右、从上到下的布局样式。

2. 相对定位(relative)

相对定位指元素相对于原本的位置进行偏移，保留元素所占的位置，元素框定位到其他元素的上层。

// 指定position属性后，还要指定left/right/top/bottom属性
position: relative;
left: 2px;
top: 2px;

3. 绝对定位(absolute)

绝对定位指元素以非static定位的祖先元素Padding区域左上角为定位原点，进行偏移，不会保留元素所占的位置。如果祖先元素都是static定位，则以body元素为参考点。

// 同样要指定left/right/top/bottom属性
position: absolute;
left: 2px;
top: 2px;

4. 固定定位(fixed)

固定定位指元素以页面左上角为定位原点，进行定位，不会保留元素所占的位置。

// 同样要指定left/right/top/bottom属性
position: fixed;
left: 2px;
top: 2px;

补充

如果定位时，同时指定left和right属性，则元素的宽度就会确定下来；高度同理。