CSS position 属性

我在前面已经写了浮动，和清除浮动的文章，这里我怎么能少了position。我知道很多人在学习CSS的时候，这个属性很让人头疼。但是，真正理解了，其实不难。

首先，position这个属性定义建立元素布局所用的定位机制。

在W3C描述可能的值：值描述absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。

1.position:static

先说static,所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。一般来说，不用指定 position:static，除非想要覆盖之前设置的定位，所以这个是很少用到的。

2.position:fixed

fixed,固定定位，position:fixed，这个定位，一般在很多网站上，用于广告居多。因为fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。使用 left ， right ， top ， bottom 等属性可以对其进行定位。下面举一个例子来说明。

 #fixed{            position: fixed;            height: 100px;            background-color: yellowgreen;            top: 200px;            left: 10px;        }

<div id="fixed">    position:fixed</div>

3.position:relative

相对定位，position:relative,这个定位，其实是相对他本身进行偏移的，在下面举个例子:

#relative{            position: relative;            width: 200px;            height: 100px;            background-color: yellowgreen;            top: 200px;        }        #normal{            width: 100px;            height: 100px;            background-color: cornflowerblue;        }

<div id="relative">    position:relative</div><div id="normal"></div>

看了例子和图，大家应该明白了，相对定位，只是相对于他本身偏移，如果我在id="relative"里不设置position: relative;那么他会在他本身所在的位置显示，设置之后他会根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。

当然，我在此处又设置了一个DIV，不是摆设，只是想说明id="normal"这个DIV该在哪个位置，就在哪个位置，不会因为id="relative"设置了position: relative;而改变位置大小。

当我在id="normal" 也设置了position: relative;会发生什么呢？答案是表面看上去什么都没有发生，他还是在他原本的位置，但是他会根据top，right，bottom，left的值按照它理应所在的位置进行偏移！但是，他的偏移就会根据id="relative"原本所在的位置进行偏移了。

4.position:absolute

绝对定位。当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。

这里我不得不说一下，绝对定位，不是按照浏览器窗口来定位的，这种说法是要分场合的。

  #absolute{            position: absolute;            width: 200px;            height: 100px;            background-color: yellowgreen;            top: 100px;        }        #normal{            width: 400px;            height: 300px;            top: 50px;            background-color: cornflowerblue;        }

<div id="normal">    <div id="absolute">     position:absolute    </div></div>

这个例子可以看到，id="absolute"已经脱离了正常文档流，而且显示在父元素的上层。不过，我在他的父元素（id="normal"）里加入position的属性值为absolute或者relative时，他会出现什么样的情况呢？下面我们看图片。

因为我在id="normal"里加如了top:50px;所以他会向下偏移50px，但是id="absolute"在他的父元素里，还是处于他父元素本来的位置，只是跟随父元素下移了50px。

总结：

这些小例子其实并不能说明太多的问题，真正的问题还是存在于实际的运用之中。

下面我顺便一提，position:absolute，有很多地方都需要用到，需要掌握的非常熟练，比如淘宝上有很多地方都运用了这个属性。