CSS 绝对定位 position:absolute、z-index 设置堆叠顺序

富士康质检员张全蛋

已于 2025-02-10 20:47:35 修改

阅读量3.7k

点赞数 7

于 2024-03-18 17:20:19 首次发布

本文链接：https://blog.csdn.net/qq_34556414/article/details/136814843

版权

html css javascript jquery 专栏收录该内容

31 篇文章

订阅专栏

定位也是使用频率比较高的，因为它优势很明显就是随心所欲，你想将这个元素放在哪就放在哪。

其中absolute和fixed都会脱离文档流，相当于在上面又摆了一层，解决标准流当中产生的一些问题，设置好定位之后，可以调整其位置。

可以先使用position来设置相对、绝对、固定定位。此时可以使用right，left，top，bottom四个方向键。

（1）相对定位 position: relative 不脱离文档流

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style>
        div{
           height: 200px;
           width: 200px;
           background-color: red;
           position: relative;
           top: 100px;
           left: 200px;
        }
    </style>
</head>


<body>
    <div>
       <p>这是div1</p>
    </div>
</body>

</html>

这样距离左边就有200px，上面距离100px，这样就可以随心所欲的调整元素在页面当中的位置了，设置position之后可以使用四个方向键来调整位置。

（2）绝对定位 position: absolute 脱离文档流

绝对定也是可以使用四个方向键，但是相对于相对定位来说，相对定位还在标准流当中，还会产生一些问题，而绝对定位是脱离文档流的同时还可以调整位置，通过上下左右的方向，它的优势是脱离了文档流。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style>
        .box1{
           height: 200px;
           width: 200px;
           background-color: red;
           position: absolute;
           left: 200px;
           top: 100px;
        }

        .box2{
            background-color: cadetblue;
            width: 500px;
            height: 500px;
        }
    </style>
</head>


<body>
    <div class="box1">
        <p>box</p>
    </div>
    <div class="box2">
       <p>绝对定位</p>
    </div>
</body>

</html>

没有压盖的效果，这样一个div下面就是另外一个div。

可以看到被红色的盖住了，有压盖就相当于脱离了文档流。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style>
        .box1{
           height: 200px;
           width: 200px;
           background-color: red;
           position: absolute;
           left: 200px;
           top: 100px;
        }

        .box2{
            background-color: cadetblue;
            width: 500px;
            height: 500px;
        }

        .box3{
            background-color: green;
            width: 300px;
            height: 300px;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>


<body>
    <div class="box1">
        <p>box1</p>
    </div>
    <div class="box2">
       <p>box2</p>
    </div>
    <div class="box3">
        <p>box3</p>
     </div>
</body>

</html>

每次设置应该绝对定位，它都是一层，相当于这个页面有三层。它和浮动不一样，浮动就两层，标准在一层，浮动在一层。绝对定位是设置了几个定位就是几层，上面设置了两个绝对定位加上标准那么就有三层。

（3）固定定位 position: fixed 脱离文档流

它也是脱离文档流的，在使用固定定位的时候，基本上使用不到多个固定定位，整个页面有一个固定定位就够用了，因为固定定位使用场景有限。

它会随着页面的滚动固定在一个位置。可以看到不管怎么滚动，这部分的内容的位置都不会发生变化，这个是绝对定位所不能实现的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style>
        .box{
            height: 500px;
            width: 500px;
            background-color: aqua;
        }
        .box1{
           height: 200px;
           width: 200px;
           background-color: red;
           position: fixed;
           right: 100px;
           bottom: 100px;
        }

    </style>
</head>


<body>
    <div class="box">
        <p>box1</p>
   </div>
   <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="box1">
        <p>box1</p>
    </div>
</body>

</html>

固定定位不管在哪个位置，随着滚动，位置并不会发生变化。

绝对定位和固定定位虽然都会脱离文档流，但是它两的效果都是有区别的。绝对定位会随着滚动而滚动，但是固定定位随着滚动而不滚动，就在固定的位置

如果父级元素添加了定位，可以看到随着父级元素的移动而移动，这是因为父级有定位的情况。如果父级元素没有定位，它的移动是相对于文档来移动的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: relative;
            margin-left: 100px;
        }
        .box{
           width: 100px;
           height: 100px;
           background-color: red;
           position: absolute;
           left: 100px;
           top: 100px;
        }

    </style>
</head>


<body>
    <div class="container">
        <div class="box">
            <p>box1</p>
        </div>
    </div>
</body>

</html>

小盒子的移动是基于父级容器来移动的，前提是父级容器有定位，如果父级容器没有定位，那么是相对于文档来移动。

如果小盒子想随着大盒子移动，那么大盒子得添加一个相对定位。子集添加绝对定位去移动位置。

如果想基于文档去定位，那么父级就不需要添加相对定位。

z-index 绝对定位设置堆叠顺序

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<style>
    .box1{
        width: 100px;
        height: 100px;
        position: absolute;
        background-color: red;
        z-index: 3;
    }
    .box2{
        width: 300px;
        height: 300px;
        position: absolute;
        background-color: blue;
        top: 100px;
    }
</style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

这样红色就覆盖紫色的了，哪个z-index大就覆盖哪个，通过调整z-index来调整覆盖的顺序。谁大谁就在上面。

--------------------------------------------------------------------------------------------------------------------------------

补充：

什么是CSS绝对定位、absolute定位？

绝对定位absolute定位是CSS中的一种定位方式，可以将元素精确定位到一个确定的点，这与元素在文档流上的自然位置无关。相比起其他定位方式，绝对定位很灵活性，它可以将元素脱离文档流，使得元素的位置不受页面上其他元素的影响。相应地，元素独立悬浮于页面上。

实现过程

（1）在CSS中使用绝对定位需要使用position属性，值为absolute。

（2）并且，还需要使用top、left、bottom、right 这4个属性之一来设置元素的位置。四个属性的设置说明如下：

top：元素上边缘的距离顶部边缘的距离，单位可以是px、em或%；
left：元素左边缘的距离左边沿的距离，单位可以是px、em或%；
bottom：元素下边缘的距离底部边界的距离，单位可以是px、em或%；
right：元素右边缘的距离右边缘的距离，单位可以是px、em或%。

其中，top和left属性决定了元素的左上角的位置，bottom和right属性决定了元素的右下角的位置。需要注意的是，在使用这些属性时，要确保元素的父元素也是定位的，且父元素的position属性不是static。

.login-card{
    position: absolute;
    left: 30%;
    top: 30%;
    width: 450px;
}

这个login-card组件背景就是一张图片，然后通过绝对定位，脱离文档流了。最终通过left top这些属性来布置定位效果。

代码示例

下面展示一个使用CSS绝对定位absolute定位的例子，这个例子是创建一个浮动在页面右下角的帮助按钮。

position: absolute;
bottom: 10px;
right: 10px;

<!DOCTYPE html>
<html>
<head>
  <title>使用CSS绝对定位absolute定位</title>
  <style>
    /* 使用CSS样式定义帮助按钮 */
    .help {
      display: block;
      position: absolute;
      bottom: 10px;
      right: 10px;
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      font-size: 16px;
      border-radius: 5px;
      text-align: center;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <a href="#" class="help">帮助</a>
</body>
</html>