css 定位属性：position
对于position一直存有一些疑惑,特别是相关联的z-index属性,更是有些摸不着头脑,今天好好学习一下position属性的各个值不同的表现形式
语法：
position：static | relative | absolute | fixed
默认值：static
取值：
static： 无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用
relative： 对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置
absolute： 对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义
fixed： 对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值
说明：
检索对象的定位方式。
对应的脚本特性为position。
兼容性：
都支持，除IE6不支持fixed取值参数
上面的说法比较全面，但是不易理解，我做了一个demo页面，从实例出发，一目了然，代码如下：
View Code
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>css定位属性：position</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> *{margin: 0;padding: 0;} body {font-size: 12px;color: #000;text-align: center;background: #fff;} ul, ol {list-style: none;} img {border: none;} .clearfix:after {visibility: hidden;display: block;height: 0;font-size: 0;clear: both;} .clearfix {*zoom: 1;} .left {float: left;} .right {float: right;} .wrap {margin: 0 auto;width: 100%;text-align: left;} .demoDesc {margin-bottom: 10px;} .demoDesc dt {font-size: 14px;font-weight: 700;} .demoDesc dd {text-indent: 2em;} .demoWrap {margin-bottom: 10px;color: #fff;background: #ccc;} .reference-1 {width: 100px;height: 100px;background: #000;} .reference-2 {width: 100px;height: 100px;background: #01f;} .demo {width: 100px;height: 100px;background: #f00;} .demo .demo {width: 50px;height: 50px;background: #000;} .demo-1 {margin: 10px;padding: 10px;border: 5px solid green;} .demo-static {position: static;} .demo-2 {margin: 10px;padding: 10px;border: 5px solid green;} .demo-relative {position: relative;top: 5px;left: 5px;} .demo-3 {position: relative;margin: 10px;padding: 10px;width: 400px;border: 5px solid green;}/*如果绝对定位的父元素，没有设置width属性值为auto以外的任何值，则在IE6下，绝对定位的元素left,right值会以父元素的padding为边界进行计算*/ .demo-absolute {position: absolute;top: 5px;left: 5px;}/*绝对定位的元素是参照有定位属性position且值不为static(即position: relative | absolute)的父级元素*/ .demo-4 {margin: 10px;padding: 10px;border: 5px solid green;} .demo-fixed {position: fixed;top: 5px;left: 5px;}/*脱离文档流，不占位，IE6不支持，当成static来解析*/ .demo-fixed-2 {position: fixed;}/*游离到窗口外面去了*/ .demo-fixed-3 {position: fixed;bottom: 40px;margin-left: 110px;}/*设置top或者bottom垂直方向的值，然后使用margin正(负)值定位元素的横向坐标*/ </style> </head> <body> <div class="wrap"> <dl class="demoDesc"> <dt>css定位属性：position</dt> <dd>定位方式之一，脚本特性为 position</dd> <dd>position: static | relative | absolute | fixed</dd> <dd>static: 无特殊定位，对象遵循正常文档流。(top，right，bottom，left等属性不会被应用)</dd> <dd>relative： 对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。(如果绝对定位的父元素，没有设置width属性值为auto以外的任何值，则在IE6下，绝对定位的元素left,right值会以父元素的padding为边界进行计算)</dd> <dd>absolute： 对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。(绝对定位的元素是参照有定位属性position且值不为static(即position: relative | absolute)的父级元素)</dd> <dd>fixed： 对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。(IE6及以下不支持此参数值)</dd> </dl> <!-- position: static --> <div class="demoWrap demo-1"> <div class="reference">我是参照物</div> <div class="demo demo-static">position: static</div> </div> <!-- position: relative 父元素也为 relative --> <div class="demoWrap demo-2"> <div class="reference-1">我是参照物</div> <div class="demo demo-relative"> <div class="demo demo-relative">position: relative;top: 5px;left: 5px;</div> <p>position: relative;top: 5px;left: 5px;</p> </div> <div class="reference-2">我是参照物</div> </div> <!-- position: relative 父元素也为 absolute --> <div class="demoWrap demo-3"> <div class="reference-1">我是参照物</div> <div class="demo demo-absolute"> <div class="demo demo-relative">position: relative;top: 5px;left: 5px;</div> <p>position: absolute;top: 5px;left: 5px;</p> </div> <div class="reference-2">我是参照物</div> </div> <!-- position: absolute 父元素也为 absolute --> <div class="demoWrap demo-3"> <div class="reference-1">我是参照物</div> <div class="demo demo-absolute"> <div class="demo demo-absolute">position: absolute;top: 5px;left: 5px;</div> <p>position: absolute;top: 5px;left: 5px;</p> </div> <div class="reference-2">我是参照物</div> </div> <!-- position: absolute 父元素也为 static --> <div class="demoWrap demo-3"> <div class="reference-1">我是参照物</div> <div class="demo demo-static"> <div class="demo demo-absolute">position: absolute;top: 5px;left: 5px;</div> <p>position: static;绝对定位的元素是参照有定位属性position且值不为static(即position: relative | absolute)的父级元素</p> </div> <div class="reference-2">我是参照物</div> </div> <!-- position: fixed --> <div class="demoWrap demo-4"> <div class="reference-1">我是参照物</div> <div class="demo demo-fixed">position: fixed;top: 5px;left: 5px;</div> <div class="reference-2">我是参照物</div> </div> <!-- position: fixed 不设置top与left等位置信息(游离到窗口外面去了) --> <div class="demoWrap demo-3"> <div class="reference-1">我是参照物</div> <div class="demo demo-fixed-2">position: fixed;不设置top与left等位置信息(游离到窗口外面去了)</div> <div class="reference-2">我是参照物</div> </div> <!-- position: fixed 设置top或者bottom垂直方向的值，然后使用margin正(负)值定位元素的横向坐标 --> <div class="demoWrap demo-3"> <div class="reference-1">我是参照物</div> <div class="demo demo-fixed-3">position: fixed;bottom: 40px;margin-left: 110px;(这是一个强大的特性)</div> <div class="reference-2">我是参照物</div> </div> </div> </body> </html>
通过demo，我得出以下几点：
a 如果绝对定位的父元素，没有设置width属性值为auto以外的任何值，则在IE6下，绝对定位的元素left,right值会以父元素的padding为边界进行计算
b 绝对定位的元素是参照有定位属性position且值不为static(即position: relative | absolute)的父级元素
c fixed元素脱离文档流，不占位。IE6把fixed当成static来解析
d 如果元素相对或、绝对，固定定位(position: relative | absolute | fixed)，那么元素会漂浮在正常文档流之上(尽管我们没有设置z-index属性值)
e 还没想到...
代码可直接拷贝运行，结合显示效果，稍微琢磨一下就明白了。
希望本文对你有帮助，demo里面的配色直接无视吧，我是个没有美感的人，55555
