CSS定位五种显示方式（主要解释固定定位和粘性定位）

最新推荐文章于 2024-05-20 20:46:24 发布

Try Tomato

最新推荐文章于 2024-05-20 20:46:24 发布

阅读量1k

点赞数 3

分类专栏： + HTML & CSS 文章标签： css css3 前端 html5 html

本文链接：https://blog.csdn.net/weixin_63836026/article/details/123327333

版权

+ HTML & CSS 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

我们在设计编写网页时一定会用到的的一个CSS命令就是position了

position一共有五种显示方式，分别为：

static： 静态定位（默认值【无定位】）；

relative：相对定位（也就是相对于原来的位置移动）；

absolute：绝对定位（相对于它的父元素移动【绝对定位如果没有其父元素的定位或者没有父元素，则以浏览器为准】）；

我们常说的：自绝父相就是给到父亲相对定位，给到其子元素绝对定位。这样就可以实现静态定位了

好了，接下来我们详细来讲解一下剩下的俩种定位模式：

fixed：固定定位（固定在浏览器的一个位置不发生变化）；

我们在代码和图片中做解释：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            position: fixed;
            top: 200px;
            right: 0;
            width: 200px;
            height: 200px;
            border-radius: 10px;
            background-color: #a52a2a;
        }
        i{
            position: absolute;
            top: 2000px;
        }
    </style>
</head>
<body>
    <div></div>
    <i>我在下方2000像素的位置</i>
</body>
</html>

我们给到盒子一个固定定位，并且以浏览器的可视区域为准给到了top和right，使盒子始终处在一个可视区域固定的位置。

我们通过图片看一下我们在滚动页面的时候它是怎么运动的：

这是我们刚打开页面的时候，确实在距离上方200像素的地方，那我们试着滑动鼠标滚轮看看是什么样的效果：

我们不难看出，当我们滑倒了<i>标签的时候已经距离上方2000像素了,盒子的位置还是在原来固定的位置

所以我们得出结论：fixed固定定位是在浏览器的可视区域一直固定在一个位置，不会随着页面的滚动而变换位置。

我们再看最后一种定位模式：

sticky：粘性定位（在没有达到阈值之前，相当于relative，达到阈值之后，相当于固定定位）；

我们在代码和图片中解释：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            position: sticky;
            top: 200px;
            margin-top: 500px;
            width: 200px;
            height: 200px;
            border-radius: 10px;
            background-color: #a52a2a;
        }
        i{
            position: absolute;
            top: 2000px;
        }
    </style>
</head>
<body>
    <div></div>
    <i>我在下方2000像素的位置</i>
</body>
</html>

还是刚才的例子，我们只是改变成为粘性定位，并且给盒子添加了上外边距使盒子先定在一个位置，当我们把页面滚到200像素的时候，我们发现在这一刻，在向下滑动的时候，盒子变成了固定定位的样式，在可视区域不动了