CSS中的position属性

定位

定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素, 通过position属性来设置元素的定位

属性值：

固定定位fixed

元素的位置相对于浏览器窗口是固定的，不会因为页面的滚动而移动。fixed定位使元素的位置与文档流无关，因此不占据空间。fixed定位的元素和其他元素重叠。IE6不支持固定定位。

相对定位relative

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。

绝对定位absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute定位使元素的位置与文档流无关，因此不占据空间。absolute定位的元素和其他元素重叠。

页面有三个div元素，分别将div2设置为绝对定位和相对定位

 .div2 {
     position: relative;
      top: 50px;
      left: 100px;
  }

如图，将div2设置成相对定位后，div2元素仍占据原先的空间，而div2元素相对于原先的起点移动top50,left100.

 .div2 {
    position: absolute;
     top: 50px;
     left: 100px;
 }

如图，将div2设置成绝对定位后，div2元素脱离文档流，而div2元素相对于最近的已定位父元素进行移动。

只有开启了定位的元素才能设置层级，如果定位元素的层级是一样，则下边的元素会盖住上边的，通过z-index属性可以用来设置元素的层级，可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示，对于没有开启定位的元素不能使用z-index。