1.相对定位

1.1 如何给元素设置相对定位

  • 给元素设置position:relative，即可实现相对定位
  • 可以使用left、right、top、bottom四个属性调整位置

1.2 相对定位的参考点

  • 相对自己原来的位置

1.3 相对定位的特点

  1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
  2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。默认规则是：
  • 定位的元素会盖在普通元素之上
  • 都发生定位的两个元素，后写的元素会盖在先写的元素之上
  1. left不能和right一起设置，top不能和bottom一起设置
  2. 相对定位的元素，也能继续浮动，但是不推荐这样做
  3. 相对定位的元素，也能通过margin调整位置，但不推荐这样做

    注意：绝大多数情况下，相对定位会与绝对定位配合使用。

1.4 作用

  1. 对网页元素进行微调
  2. 配合绝对定位一起使用

2.绝对定位

2.1 如何设置绝对定位

  • 给元素设置position:absolute，即可实现相对定位
  • 可以使用left、right、top、bottom四个属性调整位置

2.2 绝对定位的参考点在哪里

  • 参考它的包含块

    什么是包含块？

    1. 对于没有脱离文档流的元素：包含块就是父元素
    2. 对于脱离了文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没有定位，那包含块就是整个页面）

2.3 绝对定位元素的特点：

  1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
  2. left不能和right一起设置，top不能和bottom一起设置
  3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
  4. 绝对定位的元素，也能通过margin调整位置，但不推荐这样做
  5. 无论什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

    什么是定位元素？ —- 默认宽、高都被内容所撑开，且能够自由设置宽高

3.固定定位

3.1 固定定位如何设置

  • 给元素设置position:fixed，即可实现相对定位
  • 可以使用left、right、top、bottom四个属性调整位置

3.2 固定定位的参考点在哪里

  • 参考它的视口

    什么是视口：对于 PC 浏览器来说，视口就是我们看网页的那扇窗户

3.3 固定定位元素的特点

  1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
  2. left不能和right一起设置，top不能和bottom一起设置
  3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
  4. 绝对定位的元素，也能通过margin调整位置，但不推荐这样做
  5. 无论什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

4.粘性定位

4.1 如何设置粘性定位

  • 给元素设置position:sticky，即可实现相对定位
  • 可以使用left、right、top、bottom四个属性调整位置

4.2 粘性定位的参考点在哪里？

  • 离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先(如设置了overflow:scoll的元素)。

4.3 粘性定位元素的特点

  • 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式
  • 最常用的是top值
  • 粘性定位和浮动可以同时设置，但是不推荐这样做
  • 粘性定位的元素，也可以通过margin调整位置，但是不推荐这样做。

    粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定

5.定位的层级

  1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
  2. 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
  3. 可以通过 CSS 属性z-index调整元素的显示层级。
  4. z-index的属性值是数字，没有单位，值越大显示层级越高。
  5. 只有开启了定位的元素z-index才有效
  6. 如果z-index值大的元素，依然没有覆盖掉z-index小的元素，请检查包含块的层级。

6.定位的特殊应用

  • 注意点：
    1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高
    2. 发生相对定位后，元素依然是之前的显示模式
    3. 以下说的特殊应用，只针对绝对定位和固定定位，不包括相对定位的元素。

6.1 让定位元素的宽充满包含块

  1. 定位元素宽度想与包含块一致，可以给定位元素同时设置left和right为0.
  2. 高度想与包含块一致，top和bottom设置为0;

6.2 让定位元素在包含块中居中

  • 方案 1 ：
1
2
3
4
5
6
/* 第一种方法：更推荐使用*/
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
  • 方案 2：
1
2
3
4
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -50px;

注意：该定位元素必须设置宽高!

6.3 代码示例

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位_定位的特殊应用</title>
    <style>
      /* 应用1：让元素充满父元素 */
      .outer1 {
        height: 400px;
        background-color: #ccc;
        position: relative;
      }
      .inner1 {
        background-color: deepskyblue;
        font-size: 20px;
        padding: 10px;
        border: 5px black solid;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
      /* 应用2：让元素水平垂直居中 */
      .outer2 {
        width: 800px;
        height: 400px;
        background-color: #ccc;
        position: relative;
        border: 1px black solid;
      }
      .inner2 {
        width: 400px;
        height: 100px;
        background-color: deeppink;
        position: absolute;
        /* 第一种方法：更推荐使用*/
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        /* 第二种方法 */
        /* left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -50px; */
      }
    </style>
  </head>
  <body>
    <div class="outer1">
      <div class="inner1">hello,world!</div>
    </div>
    <br />
    <div class="outer2">
      <div class="inner2">hello,world!</div>
    </div>
  </body>
</html>