定义：通过定位可以将元素摆放到页面的任何位置

通过position属性来设置定位

属性值

  • static:(静止定位)默认值，元素只静止的没有开启定位
  • relative:(相对定位)开启元素的相对定位
  • absolute:(绝对定位)开启元素的绝对定位
  • fixed:(固定定位)开启元素的固定定位
  • sticky:(粘滞定位)开启元素的粘滞定位

偏移量(offset)

定义：当元素开启了定位以后，可以通过偏移量来设置元素的位置

top:定位元素和定位位置上边的距离
bottom:定位元素和定位位置下边的距离
left:定位元素和定位位置左边的距离
right:定位元素和定位位置右边的距离

结论

1.定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下只会使用其一

  • top值越大，定位元素越向下移动
  • bottom值越大，定位元素越向上移动

2.定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用其一

  • left值越大，定位元素越向右移动
  • right值越大，定位元素越向左移动

相对定位

定义：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留

对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框

特点

1.元素开启相对定位以后 如果不设置偏移量(offset) 元素不会发生任何变化

2.相对定位是参照与元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质 块还是块 行内还是行内

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
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .demo1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: relative;
        }

        .demo1:hover {
            top: 400px;
            left: 400px;
        }

        .demo2 {
            width: 200px;
            height: 200px;
            background-color: chocolate;
        }
    </style>
</head>

<body>
    <div class="demo1"></div>
    <div class="demo2"></div>
</body>

</html>

绝对定位

特点

1.开启绝对定位后 如果不设置偏移量 元素位置不会发生变化
2.开启绝对定位后 元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4.绝对定位会使元素提升层级
5.绝对定位是相对于其包含块进行定位的

包含块(containing block):正常情况下包含块就是离当前元素最近的祖先块元素
绝对定位的包含块： 离它最近的开启定位的祖先元素
如果所有的祖先元素都没有开启定位
则相对于根元素进行定位
html(根元素，初始包含块)

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .wnehezhiyuan{
            position: relative;
            width: 700px;
            height:700px;
            border: solid 3px cornflowerblue;
        }
        .demo1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;  
            
        }

        .demo1:hover {
            top: 30%;
            left:30%;
        }

        .demo2 {
            width: 300px;
            height: 300px;
            background-color: chocolate;
        }
    </style>
</head>

<body>
    <div class="wnehezhiyuan">
        <div class="demo1"></div>
        <div class="demo2"></div>
    </div>
</body>

</html>

固定定位

特点

1.固定定位也是一种绝对定位 所以固定定位的大部分特点和绝对定位一样
2.唯一不同的是 固定定位永远参照于浏览器的视口(浏览器可视窗口)进行定位
3.固定定位的元素不会随滚动条滚动上去 而是跟随可视窗口的移动而移动

粘滞定位

特点

1.粘滞定位的特点和相对定位基本一样
2.粘滞定位可以在元素到达某个位置时固定

绝对定位元素的布局

水平方向布局

等式

left+margin-left+border-left+padding-left+width+padding-left+width+padding-right+margin-right+right=包含块内容区的宽度

当开启绝对定位后：
水平方向的布局等式就要添加left和right两个值
此时规则和之前一样只是多添加了两个值
当发生过渡约束时：
如果九个值中没有auto 则自动调整right值 以使等式满足
如果有auto则自动调整auto的值以使等式满足
可以设置auto的值：margin width left right
left和right的值默认是auto 则等式不满足时，会自动调整这两个值

垂直方向布局

等式

top+margin-top+margin-bottom+padding—top/bottom+border-top/bottom+height+bottom=包含块的高度

元素堆叠（层级）

z-index

有关z-index的说明：

  1. 无z-index或者z-index值相等时，堆叠顺序均由元素在文档中的先后位置决定，后出现的会在上面
  2. 当向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素
  3. 自由的z-index元素可以与其他自由的定位元素或者父元素的同级兄弟定位元素来比较z-index的值，决定其堆叠顺序
  4. z-index值只决定同一父元素中的同级子元素的堆叠顺序
  5. 父元素的z-index值为子元素定义了堆叠顺序，即子元素依赖于父元素z-index值来获得页面中的堆叠顺序
  • 对于开启定位的元素，可以通过z-index属性来指定元素的层级
  • z-index需要一个整数作为参数，值越大的元素的层级越高
  • 元素层级越高的越优先显示
  • 如果元素层级一样 则优先显示靠下的
  • 祖先元素层级再高，不会盖住后代元素
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
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo{
            width:400px;
            height:400px;
            background-color:#bfc;
            position:relative;
            z-index:4;
        }
        .demo1{
            width:400px;
            height:400px;
            background-color:#000;
            position:relative;
            z-index:3;
            bottom:200px;
            left:200px;
        }
        
    </style>
</head>
<body>
    <div class="demo"></div>
    <div class="demo1"></div>
</body>
</html>