1.理解文档流和定位(position)

文档流是指文档中的盒子布局按html标签的顺序按从左到右、从上到下的顺序排列，其中每个块级元素独占一行，行内元素在一行之内按从左到右属性排列，每个盒子根据盒子模型都占据着自己的位置。

定位是指可以使用css的position属性来设置元素的定位类型，从而改变元素在文档流中的位置。

2.CSS定位(position)属性

  • static: static是默认值，元素按正常的文档流布局方式(从上到下、从左到右、块级独占一行、行级元素在一行从左到右)在文档流中占据着自己的位置。
  • relative: 将元素设置为相对定位元素。元素将相对于其自己原来在文档流中的位置进行偏移。元素自己在原来在文档流中占据的位置还将保留，只是它自己飘起来相对于自己原来的位置进行偏移。
  • absolute: 将元素设置为绝对定位元素。元素将脱离文档流，不再占据自己原来在文档流中的位置，可以理解为漂浮在文档流的上方。绝对定位相对于上一个设置了定位的父级元素(relative, absolute, fixed)来定位，如果没有找到设置了定位的父级元素，则相对于body元素进行定位。
  • fixed: 将元素设置为固定定位元素。元素将脱离文档流，不再占据自己原来在文档流中的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

关于relative的使用场景，一般是将父级元素设置成relative相对定位，子级元素设置成绝对定位，这样子级元素的绝对定位是以父级元素作为参照物的，否则子级是相对于body来定位的。

使用position进行定位时，需要借助四个方向上的偏移值属性分别是：

  • left表示从左往右偏移
  • right表示从右往左偏移
  • top表示从上往下偏移
  • bottom表示从下往上偏移

使用position进行定位时，需要借助z-index属性设置元素的层级。因为定位元素是浮动在正常的文档流之上的,z-index用来设置元素发生叠加时谁盖住谁。

3.示例

1
2
3
4
5
6

<div class="container">
    <div class="block1">block1</div>
    <div class="block2">block2</div>
    <div class="block3">block3</div>
    <div class="block4">block4</div>
</div>

3.1 标准文档流布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<style>
    .container {
        width: 800px;
        height: 600px;
        border: 1px solid black;
        margin: 40px auto;
    }
    .block1, .block2, .block3, .block4 {
        width: 200px;
        height: 100px;
        margin: 10px;
    }
    .block1 {
        background: lightcoral;
    }
    .block2 {
        background: lightslategray;
    }
    .block3 {
        background: lightskyblue;
    }
    .block4 {
        background: lightyellow;
    }
</style>

css-position-1.jpg

3.2 相对定位(relative)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<style>
.container {
    width: 800px;
    height: 600px;
    border: 1px solid black;
    margin: 40px auto;
}
.block1, .block2, .block3, .block4 {
    width: 200px;
    height: 100px;
    margin: 10px;
}
.block1 {
    background: lightcoral;
}
.block2 {
    background: lightslategray;
    position: relative;
    left: 100px;
    top: 50px;
}
.block3 {
    background: lightskyblue;
}
.block4 {
    background: lightyellow;
}
    </style>

css-position-1.jpg

3.3 绝对定位(absolute)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<style>
    .container {
        width: 800px;
        height: 600px;
        border: 1px solid black;
        margin: 40px auto;
    }
    .block1, .block2, .block3, .block4 {
        width: 200px;
        height: 100px;
        margin: 10px;
    }
    .block1 {
        background: lightcoral;
    }
    .block2 {
        background: lightslategray;
        position: absolute;
        left: 100px;
        top: 50px;
    }
    .block3 {
        background: lightskyblue;
    }
    .block4 {
        background: lightyellow;
    }
</style>

css-position-1.jpg

因为绝对定位相对于上一个设置了定位的父级元素(relative, absolute, fixed)来定位，如果没有找到设置了定位的父级元素，则相对于body元素进行定位。 如果设置block2的父级元素container为相对定位，同时不设置偏移值，则block2的绝对定位是相对于container的。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<style>
    .container {
        width: 800px;
        height: 600px;
        border: 1px solid black;
        margin: 40px auto;
        position: relative;
    }
    .block1, .block2, .block3, .block4 {
        width: 200px;
        height: 100px;
        margin: 10px;
    }
    .block1 {
        background: lightcoral;
    }
    .block2 {
        background: lightslategray;
        position: absolute;
        left: 100px;
        top: 50px;
    }
    .block3 {
        background: lightskyblue;
    }
    .block4 {
        background: lightyellow;
    }
</style>

css-position-1.jpg

3.4 固定定位(fixed)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<style>
    .container {
        width: 800px;
        height: 600px;
        border: 1px solid black;
        margin: 40px auto;
    }
    .block1, .block2, .block3, .block4 {
        width: 200px;
        height: 100px;
        margin: 10px;
    }
    .block1 {
        background: lightcoral;
    }
    .block2 {
        background: lightslategray;
        position: fixed;
        right: 50px;
        top: 50px;
    }
    .block3 {
        background: lightskyblue;
    }
    .block4 {
        background: lightyellow;
    }
</style>

css-position-1.jpg

4.总结

使用poistion进行定位的三种属性值:

  • relative是相对于自己在文档流中原来位置的定位，同时文档流会为其保留原来的位置
  • absolute是寻找离自己的最近的设置了定位属性的(relative, absolute, fixed)的父级元素进行定位，如果找不到则相对于body进行定位，文档流不会为其保留原来的位置，会脱离文档流
  • fixed是相对于浏览器窗口进行定位，文档流不会为其保留原来的位置，会脱离文档流

使用position进行定位时，需要借助四个方向上的偏移值属性left, right, top, bottom控制元素的偏移，还可以借助z-index属性设置元素的层级。因为定位元素是浮动在正常的文档流之上的,z-index用来设置元素发生叠加时谁盖住谁。

参考