想学好CSS的position定位？看这一篇就够了，巨详细的position属性讲解

blzlh
VIP.1 初学乍练
387 阅读5分钟

引言

CSS（层叠样式表）中的position属性一直是控制元素定位的核心工具，对于构建响应式设计和复杂布局至关重要。 positon属性并不复杂，但想要正确使用却并不容易。这篇文章将带领你全方位深入理解position，希望能帮助你彻底解决这个让人头痛的问题。

ceeb653ely8hbh3brwt8kg20b40buq3y.gif

position

在官方文档中这么定义position属性

CSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置。

其实说白了就一句话：能够灵活的改变盒子在网页中的位置

四个定位类型和五个取值

position只有四个定位类型和五个取值，下面让我们来一一介绍。

四个定位类型

  • 定位元素（positioned element）是其位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。
  • 相对定位元素（relatively positioned element）是位置属性为 relative的元素。
  • 绝对定位元素（absolutely positioned element）是位置属性为 absolute 或 fixed 的元素。
  • 粘性定位元素（stickily positioned element）是位置属性为 sticky 的元素。

五个取值

static：

是CSS 属性的默认值。属性为static的元素将按照标准的文档流进行布局，不受top,right,bottom,left,z-index等属性的影响，其他元素会根据 static 定位元素的位置进行布局，不会因为 static 定位元素的移动而受到影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            padding: 5px;
            border: 1px solid red;
            background-color: green;
        }
        #box2 {
            margin: 10px;
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        #box3 {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 
      box1 在box2上面，正常的文档流
      html 文档流 和 css 结合 样式生效 盒模型
    -->
    <div id="box1">
    </div>
    <div id="box2">
        <div id="box3">box3</div>
    </div>
</body>
</html>

image.png static：正常文档流，没有什么特别的变化

relative：

相对定位。相对于原位置移动 ，盒子原来的占位（文档流中的位置） 不受影响。显示模式特点保持不变（块级元素，行内元素，行内块元素等），

现在我们为box1盒子添加相对定位

#box1 {
            position: relative;
            /* 相对自身 */
            top: 30px;
            left: 30px;
            }

image.png 可以看到box1发生了一点小小的变化，它通过top和left相对于原来的位置离开了，但之前的位置并没有被box2占用掉。

absolute：

绝对定位。不占用原位置。显示模式具备行内块特点。设置边偏移则相对最近的已经定位的祖先元素改变位置。如果祖先元素都未定位，则相对浏览器可视区改变位置。

为box3添加绝对定位

#box3 {
            position: absolute;
            /* 绝对定位  相对于父元素 */
            top: 10px;
            left: 10px; 
            }

image.png

这里可能跟预想的不太一样了，出现了特殊情况。就如上面说到的，设置absolute值之后，相对最近的已经定位的祖先元素改变位置。如果祖先元素都未定位，则相对浏览器可视区改变位置。目前我们并没有给box2添加position定位属性，所以box3将相对于浏览器可视区来改变自身的位置。

那我们现在为box2添加一个position:relative

#box2 {
            position: relative;
            }

image.png

这回box3终于相对于box2定位了，这也引出了我们常用的一种定位方法：子绝父相

在使用相对定位时，常常把子元素设置为position: absolute，把父元素设置为position: relative,来保证能够实现我们想要的结果。

fixed：

固定定位。是一种特殊的绝对定位。元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。也就是说，元素的位置在网页滚动时不会改变。就好比一些网页上左右两边的浮窗，显示模式具备行内块特点。相对于浏览器窗口进行定位。

我们把box3的absolute改为fixed。

        #box3 {
            position: fixed;
            }

再为你的html添加一些增高的东西，使它能够上下滑动，你就会发现无论你怎么滑动页面，box3永远会出现在你的浏览器的左上角

image.png

sticky：

粘性定位。它结合了 position: relative 和 position: fixed 的特点。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

还是box3，我们将他的position改为sticky。

        #box3 {
            position: sticky;
            }

这回我们看到在滑动到box3之前，它一直是相对定位。当我们滑动到box3的顶部与浏览器顶部重合时，他开始变成固定定位，跟随窗口一直出现在浏览器的左上角。但是，当我们滑动页面直到box2看不到的时候，box3也会跟着消失。因为box3是box2的子元素，活动范围只在box2中，它不能够脱离box2的掌控。

image.png

image.png

总结

我们深入探讨了CSS position属性的各种模式——从静态定位到绝对定位、相对定位、固定定位以及粘性定位，每种模式都有其独特的应用场景和优势。掌握了这些知识，你将能够更加灵活地控制网页中各个元素的位置，创造出既美观又功能性强的网页布局。

avatar
文章
阅读
粉丝