1. css定位机制

普通流：元素按照其在HTML的顺序位置决定排布的过程(上下流程或左右流程)
浮动
绝对定位：元素脱离文档流

2. css定位属性

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	元素向上的偏移量
right	元素向右的偏移量
bottom	元素向上的偏移量
left	元素向左的偏移量
overflow	设置当元素内容溢出其区域发生的事情
clip	设置元素显示的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素垂直对齐方式
z-index	设置元素的堆叠顺序

positon的值：

static ：静态的
relative：相对的
absolute：绝对的
fixed：固定的

(0) 普通流
position.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="style_position.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="position"></div>
    <script>
        for (var i=0; i<100; i++) {
            document.write(i + "<br/>");
        }
    </script>
</body>
</html>

style_position.css

#position{
    width: 100px;
    height: 100px;
    background-color: blue;
}

普通流.png
(1) 相对布局：

/*relative：不脱离文档流，会随页面滚动*/
#position{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    top: 20px;
    left: 20px;
}

相对布局.png
(2) 绝对布局：脱离文档流，会随页面滚动

/*absolute：脱离文档流，会随页面滚动*/
#position{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 20px;
    left: 20px;
}

绝对布局.png
(3) 静态布局：

/*static：不脱离文档流，会随页面滚动。static和relative的区别在于，静态布局不支持上下左右偏移量和z-index堆叠设置*/
#position{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: static;
}

静态布局.png
备注：static和relative的区别在于，静态布局不支持上下左右偏移量和z-index堆叠设置。
说明：z-index的值无上限但尽量设置在100以内，值大的元素可覆盖值小的元素，更近地显示在用户面前。

(4) 固定布局：脱离文档流，不随页面滚动

/*fixed：脱离文档流，不随页面滚动*/
#position{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: fixed;
    top: 20px;
    left: 20px;
}

固定布局.png
备注：fixed和absolute的区别在于，固定布局元素始终会在屏幕的某个位置不动。

3. 其他属性-偏移量与堆叠顺序

(1) eg1
position.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="style_position.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="position_1"></div>
    <div id="position_2"></div>
    <script>
        for (var i=0; i<100; i++) {
            document.write(i + "<br/>");
        }
    </script>
</body>
</html>

style_position.css

#position_1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    top: 20px;
    left: 20px;
}
#position_2{
     width: 100px;
     height: 100px;
     background-color: aqua;
     position: relative;
     top: 10px;
     left: 10px;
 }

效果1.png
(2) eg2

#position_1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    top: 20px;
    left: 20px;
    z-index: 2;
}
#position_2{
     width: 100px;
     height: 100px;
     background-color: aqua;
     position: relative;
     top: 10px;
     left: 10px;
     z-index: 1;
 }

效果2.png
(3) eg3

#position_1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}
#position_2{
     width: 100px;
     height: 100px;
     background-color: aqua;
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 1;
 }

效果3.png
(4) eg3

#position_1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
}
#position_2{
     width: 100px;
     height: 100px;
     background-color: aqua;
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 2;
 }
#position_3{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 1;
}

效果4.png