CSS 定位布局 - 相对、绝对、固定、粘滞四种定位 - 个人文章

文档流

默认文档流，指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式，其中每一个块元素都独占一行，行内元素则在一行之内从左到右排列，直到在当前行遇到了边界后，换到下一行的起点起点继续排列。

脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来，其他盒子在定位的时候，会当做没看到它，两者位置重叠都是可以的，但是依然在DOM树中存在。

定位的实现

我们可以通过设置css中position属性的值来设定元素的定位类型。position的值分为以下几种：

static 默认(非定位元素)
inherit 从父元素继承 position 属性的值
relative 相对(定位元素)
absolute 绝对(定位元素)
fixed 固定(定位元素)
sticky 粘滞(定位元素)

定位元素的特点: 可以使用定位规则。通过top、right、bottom、left来设置偏移量。绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

1.相对布局 position: relative;

不脱离文档流。
相对于它原来的位置移动。

案例：想要达到下图的偏移效果，该如何实现呢？

从代码看出，只要在紫色div的样式属性设置了 position:relative; 之后，就可以使用left和 top设置与原来文档布局位置的偏移量。

实现代码如下：

<!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>
        .box {
            width: 500px;
            height: 500px;
            border: 2px solid black;
        }
        .box > div {
            width: 200px;
            height: 100px;
        }
        .one {
            background-color: blueviolet;

            position:relative;
            left: 50px;
            top: 50px;
        }
        .two {
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>
</html>

2.绝对布局 position: absolute;

脱离文档流。
它以距离它最近的父定位元素为参照，如果它所有的父元素都不是定位元素，则以body为参照。(一般情况下，绝对定位元素都是嵌套在相对定位元素内容来使用)

案例：我们将上述代码中的设置相对定位的代码改成绝对定位看看。

当设置紫色的div为绝对定位之后，发现蓝色的div不见了。
其实，蓝色的div并不是不见了，而是跟紫色的div重叠了。因为当紫色div被设置为绝对定位之后，就会脱离文档流布局，此时它就相当于漂浮了起来，而蓝色div的因为没有了紫色div的挤压，自然就上去与紫色div重叠在一起了。
接下来，让我们为紫色的div设置偏移量。

此时，我们发现紫色的div出现在了父元素外面，页面的左上角。这是因为它的父元素中没有定位元素，所以它的偏移量是相对于body来进行调整的。
接下来，我们将其父元素设置为相对定位，看看会发生什么？

这个时候我们看到紫色的div回到了它父元素中。

3.固定布局 position: fixed;

脱离文档流。
它相对于浏览器窗口进行定位，相当于就是把这个元素钉在了浏览器窗口上了，无论我们怎么操作滚动条都无法改变他的位置。

我们继续使用上面的代码，将紫色div中的绝对布局改成固定布局，并将其父元素的高度变大。

从上述GIF中，我们可以看出无论我们怎么操作滚动条，紫色div都在整个浏览器页面的固定位置。

这种定位方式最适合用于放置广告。

4.粘滞布局 position: sticky;

在没有达到阈值的时候是不脱离文档流（相对），达到阈值脱离文档流（固定），可以通过left、top、right、bottom来设定阈值。

了解了上述几种布局后，我们再来看看什么是粘滞布局。将一个定位元素设置为粘滞布局后，当我们没有到达设定的阈值后，它就像正常的文档流一样，显示在该出现的位置，一旦我们到达它设置的阈值后，他就会一直停留在我们设定好的位置上。效果图如下：

css代码如下：

.two {
        width: 100%;
        height: 100px;
        background-color: lightcoral;
        position: sticky;/* 设置为粘滞定位 */
        top: 0; /* 当该元素到达整个页面距离顶端0px的时候，他会一直停留在此位置 */
    }

定位元素层级 z-index
定位元素是浮动于正常的文档流上面的，我们可以通过z-index属性来设置元素的层级。
在哪些场景里我们会用到z-index这个属性呢？比如说，当我们做一个供用户输入登录信息的弹框时，我们希望当用户点击登录后，弹出的框不会被其他任何元素覆盖时，我们可以通过设置它的z-index属性，将其层级设置为最高即可。

下面这个案例将会帮助我们学习和理解z-index属性。

代码如下：

<!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>
        .box {
            width: 400px;
            height: 600px;
            margin: 50px auto;
            border: 2px solid black;
            position: relative;
        }
        .box > div {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .one {
            background-color: red;
            top: 20px;
            left: 20px;
        }
        .two {
            background-color: orange;
            top: 40px;
            left: 40px;
        }
        .three {
            background-color: yellow;
            top: 60px;
            left: 60px;
        }
        .four {
            background-color: green;
            top: 80px;
            left: 80px;
        }
        .five {
            background-color: cyan;
            top: 100px;
            left: 100px;
        }
        .six {
            background-color: blue;
            top: 120px;
            left: 120px;
        }
        .seven {
            background-color: violet;
            top: 140px;
            left: 140px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
        <div class="six"></div>
        <div class="seven"></div>
    </div>
</body>
</html>

我们可以看到从顶到底依次是：紫、蓝、青、绿、黄、橙、赤。
如果我们想要从顶到底依次是：赤、橙、黄、绿、青、蓝、紫的话，只需要在每个div中设置z-index属性，就可以轻松实现。如下图所示：
图片.png
部分CSS代码如下：

.one {
    background-color: red;
    top: 20px;
    left: 20px;
    z-index: 7;
}
.two {
    background-color: orange;
    top: 40px;
    left: 40px;
    z-index: 6;
}
.three {
    background-color: yellow;
    top: 60px;
    left: 60px;
    z-index: 5;
}
.four {
    background-color: green;
    top: 80px;
    left: 80px;
    z-index: 4;
}
.five {
    background-color: cyan;
    top: 100px;
    left: 100px;
    z-index: 3;
}
.six {
    background-color: blue;
    top: 120px;
    left: 120px;
    z-index: 2;
}
.seven {
    background-color: violet;
    top: 140px;
    left: 140px;
    z-index: 1;
}

课后练习

按照下图所示要求，制作图标。

1.先写两个div。

2.将第一个div设置为相对定位，将第二个div设置为绝对定位。
并且设置偏移量，将第二个div放在第一个div的右上角。

3.通过border-radius属性设置两个div四周的弧度。
将第二个div的弧度设置为其宽度的一半就变成了一个圆。

代码如下：

<!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>
        .box {
            width: 75px;
            height: 75px;
            background-color: lightgreen;
            margin: 50px auto;
            position: relative;
            border-radius: 5px;
        }
        .box > img {
            height: 50px;
            background-color: white;
        }
        .red-radius {
            width: 25px;
            height: 25px;
            background-color: red;
            line-height: 25px;
            text-align: center;
            position: absolute;
            top: -12.5px;
            right: -12.5px;
            border-radius: 12.5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../微信.png" alt="">
        <div class="red-radius">
            7
        </div>
    </div>
</body>
</html>

CSS 定位布局 - 相对、绝对、固定、粘滞四种定位

文档流

定位的实现

课后练习

method

引用和评论

Markdown 基本语法

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式