CSS 定位

	在CSS中，通过CSS定位(CSS position)可以实现网页元素的精确定位。CSS定位和CSS浮动类似，也是控制网页布局的操作，CSS定位更加灵活，可以针对更多个性化的布局方案来使用。在网页布局实战中，灵活使用这两种布局方式，能够创建多种高级而精确的布局。

定位属性
制作网页时，Css可以使用定位属性将一个元素精确地放在页面上指定位置。元素的定位属性由定位模式和位置属性两部分构成。
1.定位模式
在CSS中，position属性用来定义元素的定位模式，其常用的属性值有四个，分别表示不同含义。
static 静态定位(默认定位方式)
relative 相对定位，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位fixed 固定定位，相对于浏览器窗口进行定位。静态定位就是默认的方式，当psition属性值为stati 时，可以将元素定位于静态位置。静态位置就是各个元素在HTML文档流中默认的位置。
在默认状态下任何元素都会以静态定位来确定位置。因此，当元素未设置postion属性时，会遵循默认值显示为静态位置。
2.位置属性
定位模式仅仅定义了元素的定位方式，而并不能确定元素的具体位置。在CSS中，位置属性用来精确定义定位元素的位置，其取值为不同单位的数值或百分比，定位属性包括top、bottom、 left 和right。

边偏移属性 含义
顶部偏移量 top
底部偏移量 bottom
左侧偏移量 left
右侧偏移 right

相对定位
相对定位是元素相对于它在原文档流中的位置来进行定位，position属性的取值为relative。接下来通过案例来演示直接在box2上添加position属性值。


给元素只添加relative值，对元素本身并没有任何影响，只是设置其相对定位，因此还需要通过定位属性来改变元素的位置，但它在文档流中的位置任然保留。

元素在设置left值50px和top值50px条件下，可以移动到指定的位置。相对定位是相对于元素本身的左，上角进行偏移操作的。相对定位的偏移并没有影响到其他元素的位置。
需要注意一点，定位模式和位置属性是配合在一起使用的， 如果只定义一种，则对元素不起任何作用。

绝对定位
绝对定位是元素相对于已经定位(相对、绝对或固定定位)的父元素进行定位。若所有父元素都没有定位，则依据浏览器窗口左上角进行定位。当psition属性值为asolue时，可以将元素的定位模式设置为绝对定位。接下来通过案例来演示直接将b2元素的position属性值设置为absolute。

box2叠加到box3的上面，这说明绝对定位会脱离文档流。其中中box2没有父元素，因此其定位将根据浏览器窗口左上角进行偏移，接下来将介绍绝对定位的另外两个特点。

(1)与浮动类似，块元素添加绝对定位后，默认宽与内容的宽相同。

(2)嵌套结构中的绝对定位。当父元素或祖先元素中有相对定位或绝对定位时，子元素的绝对定位将相对于父元素或祖先元素进行定位。当父元素或祖先元素都没有定位属性时，子元素将相对于浏览器窗口进行偏移。

固定定位
固定定位通过将position属性值设置为fixed来实现。固定定位与绝对定位类似，也是脱离文档流。二者的不同点是当元素的position属性设置为fixed时，元素将被固定即不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置不会改变。接下来通过案例来演示。

定位的层级
当多个元素添加定位操作时，可能会出现叠加情况，即在默认的情况下输出的HTML结构层级就会越高。接下来通过案例来演示。