CSS定位的理解

CSS定位也就是Position 属性在页面布局中经常会用到，Position 属性值有relative，absolute，fixed，static，inherit其中前三个是主要的，简单的定位应用没什么问题，但是嵌套起来，就会有些混乱，下面具体说说每个值的含义和特点。

一、relative

用于微调元素位置，让元素相对于自己原来的位置进行位置调整，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
例：

HTML：

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

CSS：

div {
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
.box2 {
           position: relative;
           top:50px;
           left:50px;
       }

效果图：

特点：相对定位不脱离标准流，在标准流中仍然占有位置，移动的相当于元素自己的影子。
作用：相对定位一般不用于做“压盖”效果，页面中一般用于微调元素位置和做绝对定位的参考（子绝父相）

二、absolute

绝对定位的参考点有点复杂，主要分为三种：

1、如果用top描述那么定位参考点就是页面的左上角，而不是浏览器的左上角

2、如果用bottom描述那么参考点就是浏览器首屏窗口尺寸

3、如果一个绝对定位的元素如果父辈元素（指的是祖先元素）也出现了定位的元素，那么将以这个定位了的父辈元素为参考点，如出现多个定位的祖先元素，以最近的祖先元素为准。如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位。

特点：绝对定位脱离标准流，标准流中的一切规则都绝对定位了的盒子无效(如：绝对定位的盒子如果不写width就不会继承父盒子的width)，所以它可以覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的堆放次序。

注：position属性值为absolute、relative或fixed，用z-index此取值方可生效，默认值为0。

三、fixed

总是以body为定位对象的，相对于浏览器窗口进行定位，页面如何滚动盒子显示的位置不变,IE6不兼容

四、static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

五、inherit

规定应该从父元素继承 position 属性的值。