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

来源：https://www.cnblogs.com/xmmcn/archive/2012/11/29/2794976.html

标签

position