CSS——position

static静态定位：默认的定位方式，就是文档流。

absolute绝对定位：

1、元素使用绝对定位之后不占据原来的位置（脱标）。

2、元素使用绝对定位，位置是从浏览器出发。

3、嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。

4、嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。

5、多个盒子使用了绝对定位会重叠在一起。

6、给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block）。

relative相对定位：

1、使用相对定位，位置从自身出发。

2、还占据原来的位置。

3、子绝父相（父元素相对定位，子元素绝对定位）。

4、行内元素使用相对定位不能转行内块。

fixed固定定位：

1、固定定位之后，不占据原来的位置（脱标）。

2、元素使用固定定位之后，位置从浏览器出发，滚动条不管不如拖动，元素永远按照当前视口进行定位

3、元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block）。

注释：一般布局中经常使用的就是父盒子使用相对定位，然后嵌套的盒子使用绝对定位。因为父盒子使用了相对定位可以给子盒子在使用绝对定位的时候一个参照。但是父盒子使用相对定位，并没有脱离文档流。而且子盒子的绝对定位是参照是最近的父盒子的相对定位。

补充：一个盒子中嵌套一个盒子，再嵌套一个盒子，如果最外层的用了相对定位，中间盒子用了绝对定位，最里面也用了绝对定位。中间盒子定位坐标是根据最外层的盒子，最里面的盒子是相对于中间的盒子。例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            position: relative;
            margin: 100px auto;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: #ccc;
            position: absolute;
            top: 100px;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 100px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>
</body>
</html>

posted @ 2017-11-07 15:16  var_obj  阅读(265)  评论(0)  编辑  收藏  举报