说明：css定位改变元素在页面上的位置。

1. css定位机制

普通流(static无定位 + relative相对定位)：元素按其在HTML的上下或左右顺序排布

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。static默认静态定位和relative相对定位的区别在于：静态布局不支持上下左右偏移量和z-index堆叠设置。

浮动float

让一个元素脱离文档流的方法有两种：即浮动（float）和定位（position）。

绝对定位(absolute绝对定位+fixed固定定位)：元素脱离文档流

absolute绝对定位和fixed固定定位的区别在于：绝对定位须相对于static定位以外的第一个父元素进行定位，固定定位是相对于浏览器进行定位。
eg：元素A使用绝对定位，须相对于static定位以外的第一个父元素进行定位。若紧邻的父元素是static定位，需继续向上查找，直到找到第一个非static定位的父元素B'，该元素A相对于父元素B'进行定位；若紧邻的父元素B是非static定位(relative/absolute/fixed)，则该元素A就是相对于父元素B进行定位的。

2. css定位属性

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

positon可能的值：

值	描述
static	`默认值`。没有定位，元素出现在正常的流中。忽略"left", "top", "right", "bottom"或者"z-index"声明。
relative	生成`相对定位`的元素，相对于其正常位置进行定位。元素的位置通过"left", "top", "right", "bottom"属性进行规定。可通过z-index进行层次分级。
absolute	生成`绝对定位`的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left", "top", "right", "bottom"属性进行规定。可通过z-index进行层次分级。
fixed	生成`绝对定位`的元素，相对于浏览器窗口进行定位。元素的位置通过"left", "top", "right", "bottom"属性进行规定。可通过z-index进行层次分级。
inherit	规定应该从父元素继承position属性的值

(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) 静态布局

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

静态布局.png

(2) 相对布局

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

相对布局.png

解疑：为什么列表会超出方块？列表未设置样式，但默认是静态布局，方块设置为相对布局，两者都在普通流里，按顺序排列；方块因为设置了偏移，所以与正常排布的位置不同，但是列表仍保持其原来应该所在的位置，方块的偏移并不影响列表在普通流中排布的位置。
备注：relative和static的区别在于，静态布局不支持上下左右偏移量和z-index堆叠设置。
说明：z-index的值无上限但尽量设置在100以内，值大的元素可覆盖值小的元素，更近地显示在用户面前。

(3) 绝对布局：脱离文档流，会随页面滚动

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

绝对布局.png

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

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

固定布局.png

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

3. 偏移量与堆叠顺序

(1) 相对布局+偏移量
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) 相对布局+偏移量+堆叠顺序

#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) 绝对布局+偏移量+堆叠顺序

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

效果3.png

(4) 绝对布局+偏移量+堆叠顺序

#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

(5) 绝对布局+固定布局+偏移量+堆叠顺序

<!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>
    <div id="position_3"></div>
    <script>
        for (var i=0; i<100; i++) {
            document.write(i + "<br/>");
        }
    </script>
</body>
</html>

#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;
 }
#position_3{
    width: 100px;
    height: 100px;
    background-color: red;
    position: fixed;
    top: 200px;
    left: 200px;
    z-index: 99;
}

效果5.png

3.1 CSS定位属性position

3.1 CSS定位属性position

1. css定位机制

2. css定位属性

3. 偏移量与堆叠顺序

推荐阅读更多精彩内容