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

387 阅读5分钟

引言

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

ceeb653ely8hbh3brwt8kg20b40buq3y.gif

position

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

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

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

四个定位类型和五个取值

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

四个定位类型

  • 定位元素(positioned element)是其位置属性为 relativeabsolutefixed 或 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发生了一点小小的变化,它通过topleft相对于原来的位置离开了,但之前的位置并没有被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)的位置来指定元素位置。也就是说,元素的位置在网页滚动时不会改变。就好比一些网页上左右两边的浮窗,显示模式具备行内块特点。相对于浏览器窗口进行定位。

我们把box3absolute改为fixed

        #box3 {
            position: fixed;
            }

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

image.png

sticky:

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

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

        #box3 {
            position: sticky;
            }

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

image.png

image.png

总结

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