CSS3基础教程(十一)

position 属性指定了元素的定位类型，熟练的使用定位对页面美化有很好的帮助。

position 常用属性的四个值：

static
relative
fixed
absolute

1.静态定位（static）

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。静态定位的元素不会受到 top, bottom, left, right影响。

2.固定定位(fixed)

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。

注意：Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

3.绝对定位（absolute）

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。

4.相对定位（relative）

相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

5.absolute与relative的区别

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 relative：生成相对定位的元素，相对于其正常位置进行定位。

两者最核心的区别在于：absolute不受父元素里的其他元素影响，而relative会受到父元素里的其他元素影响。

通过一个实例，理解以上四种定位。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #main{
            width: 400px;
            height: 400px;
            text-align: center;
            border: 1px solid #000;
            margin: 0px auto;
        }

        #box1 {
            width: 100px;
            height: 100px;
            top: 50px; /*静态定位的元素不会受到 top, bottom, left, right影响*/
            left: 50px;
            position: static;
            border: 3px solid #666;
        }

        #box2 {
            width: 100px;
            height: 100px;
            top: 50px;
            left: 50px;
            position: fixed;/*相对于浏览器窗口的固定位置*/
            border: 3px solid lightcoral;
        }

        #box3{
            width: 100px;
            height: 100px;
            top: 20px;
            left: 20px;
            position: absolute;/*由于父容器没有定位，变成相对于浏览器窗口的位置*/
            border: 3px solid lightskyblue;
        }

        #box4{
            width: 100px;
            height: 100px;
            top: 50px;
            left: 50px;
            position: relative;/*相对于其正常位置进行定位*/
            border: 3px solid lightseagreen;
        }
    </style>
</head>
<body>

<div id="main">
    main水平居中
    <div id="box1">
        static
    </div>

    <div id="box2">
       fixed
    </div>

    <div id="box3">
        absolute
    </div>

    <div id="box4">
        relative
    </div>
</div>

</body>
</html>

运行效果：