CSS定位

原创

共 4,122 字，需阅读 10 分钟

2018/05/11 上午

860 次阅读

定位

这是 CSS 中的一个重点，其通过定位来实现相对较为复杂的布局

position 属性的作用

position 属性用来指定一个元素在网页上的位置，其一共有 5 种定位方式，即 position 属性有 5 个值

static
relative
absolute
fixed
sticky

讲解这5个属性之前，我们先看一张 3D 的网页图

通过上图，我们发现网页并不是一张平整的图，是有层级的，了解了这个后我们继续正题

static 该属性是 position 的默认值，如果不添加 position 属性，浏览器就默认为 static 定位，处于正常文档流，并且通过 top, right , bottom, left 属性设置并不会生效

我们看看下面这个例子：

          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
          <!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>Position</title>
    <style>
      <!-- 清除浏览器默认样式 -->
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        position: static;
        left: 20px;
        top: 20px;
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

我们使用了 left 和 top属性，并且都偏移了 20，但是并没有生效，这里还要提一下，浏览器默认原点是左上角可视区域位置开始的

relative 相对定位，可通过 top，right，bottom，left 改变其位置

把上面的例子的 position 属性值 static 改为 relative

位置发生了变动，距离远点左边和上边都偏移了 20 ，该属性是相对于默认位置进行偏移，也就是相对于 static 进行偏移

absolute 绝对定位，该属性是相对于父元素进行偏移，这里的父元素指的是设置了 relative属性的父级元素，如果父级元素没有设置，将基于原点进行偏移

我们继续将上面例子的 position 属性值 relative 改为 absolute

和 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
29
30
31
32
33
34
35
          <!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>Position</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        color: #ccc;
      }
      .box1 {
        position: relative; 
        left: 20px;
        top: 20px;
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
      .box2 {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
</head>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
</html>

我们看到，在 box1 中还有一个 box2，并且外层盒子设置了相对定位，也进行了偏移，但是我们给内层盒子只设置了绝对定位，并没有进行偏移

我们发现，只有一个盒子了，但是细心点，我们发现，这个背景色是我们设置给内层盒子的，原来设置了 absolute 后，没有设置偏移量，相当于偏移量为 0，也就和外层盒子重叠了，那为啥我们看到的会是红色的内层盒子而不是天蓝色的外层盒子呢？

回想下我刚开始讲解时贴的那张3d 图，网页是有层级的，内层盒子脱离了文档流，漂浮起来了，并且在页面中不在占据位置，所以我们看到的红色盒子离我们"看"的方向比较近

我们设置下内层盒子的偏移量

          1
2
3
4
5
6
7
8
          .box2 {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 100px;
    top: 100px;
    background-color: red;
}

我们发现盒子显示出来了

fixed 属性相对于浏览器窗口进行偏移，不会因为页面滚动而发生变化，好像固定在那个位置一样，该属性可以和 top，right，bottom，left 进行搭配

          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
          <!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>Position</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        position: fixed; 
        left: 20px;
        top: 20px;
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
      body {
        height: 1000px;
      }
    </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

盒子并不会随着我们滚动鼠标而消失

sticky 属性表示粘性定位，其基于用户的滚动位置进行定位

该属性其实可以看成是 relative 和 fixed 相结合，当滚出页面时切换为 flxed，出现时又切换回 relative，该属性要必须搭配 top，right，bottom，left 其中之一

完

本文于2018/05/11 上午发布在秘阁

#CSS

自由转载 - 署名 - 非商业性使用

https://zhangwurui.cn/article/6

CSS选择器

CSS选择器是一种用于选择HTML元素或一组元素的模式，使得可以针对特定的元素或类别应用样式和规则。

CSS3

CSS3是一种用于设计和布局网页的样式表规范，提供了强大的功能和特性，以增强用户体验。