布局二：position

position：对元素进行定位。不论该元素本身是什么类型，绝对或固定元素会生成一个块级框。相对定位元素会相对于它在正常流中的默认位置偏移。

*由于使用浮动会对其他元素受影响即进行元素布局时常用position定位。

 

属性：

1.position：relative；对元素进行相对定位，位置通过“top”，“righ”，“bottom”“left”进行定位。未设置移动则元素仍在原本位置，设置位置移动，则该元素相对于“原始起点”进行位置定位。

 

相对定位：relative 没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位，，仍占据原来空间即会导致它覆盖其他元素

 

2.position:absolute; 对元素进行绝对定位，相对于“浏览器”进行位置定位。 ablution 和浮动一样脱离了文档流，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。

absolute常与relative配合使用：父容器使用relative，子元素使用absolute后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角

 

 

3.position:fixed; 对元素进行固定对定位，相对于“浏览器”进行位置定位。和 ablution 一样脱离了文档流，通过z-index来控制它层级次序。

常用于：需要使一个层相对于浏览器边框固定，当出现滚动条时，对象不会随着滚动。

 

4.position：static；默认的定位方式，无特殊定位，它是html元素默认的定位方式，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。

 

 

例：

定位前：

定位后：

 

结果：