CSS布局之定位布局

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属性，则元素的宽度就会确定下来；⾼度同理。