CSS定位——相对定位，绝对定位以及固定定位，z-index（图层）

最新推荐文章于 2025-03-21 00:44:33 发布

一方1

最新推荐文章于 2025-03-21 00:44:33 发布

阅读量1.2k

点赞数 1

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/m0_67737085/article/details/127214693

版权

本文介绍了CSS中的相对定位、绝对定位和固定定位，相对定位是相对于原来位置偏移，仍保留在文档流中；绝对定位基于父级或浏览器定位，不占原文档流位置；固定定位则始终固定在屏幕某位置。同时，讲解了z-index属性用于调整元素的图层顺序，通过数值控制元素的显示层级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--   相对于自己原来的位置偏移     -->
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px #666 dashed;
        }
        #p1{
            background-color: rebeccapurple;
            border: 1px #b42525 dashed;
            position: relative;/*相对定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #p2{
            background-color: aqua;
            border: 1px red dashed;
        }
        #p3{
            background-color: aquamarine;
            border: 1px yellow dashed;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="p1">第一个盒子</div>
    <div id="p2">第二个盒子</div>
    <div id="p3">第三个盒子</div>
</div>

</body>
</html>

相对定位的属性是position：relative；
相对定位是相对于原来位置的偏移

top:-10px;
left:20px;
bottom:-10px;
right:20px;

定位的属性一共这四种情况。注意：偏移是相对于原来位置的，并不是left：20px；就表示向左偏移，而是向右偏移。
而且仍在标准文档流中，原来的位置会被保留，不会飘离。

相对定位的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px red solid;
        }
        a{
            display: block;
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: darkseagreen;
            text-align: center;
            line-height: 100px;
            color: white;
        }
        a:hover{
            background-color: blue;
        }
        .a2{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a3{
            position: relative;
            left: 100px;
            top: -300px;
        }

    </style>
</head>
<body>
<div id="box">
    <a href="">链接1</a>
    <a href="" class="a2">链接2</a>
    <a href="">链接3</a>
    <a href="" class="a2">链接4</a>
    <a href="" class="a3">链接5</a>

</div>
</body>
</html>

运行结果：
在这里插入图片描述
这里便是完成了一个相对定位的基本练习。这里我们需要注意块级元素和行内元素的转换。还有相对定位要引用的元素。

绝对定位（position：absolute；）相对于浏览器的。

定位：基于xxx定位，上下左右
1.没有父级元素的前提下，相对于浏览器定位。
2.假设父级元素存在定位，我们通常相对于父级元素偏移。
3.相对于父级或者浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px #666 solid;
            padding: 0;
        }
        #first{
            background-color: rebeccapurple;
            border: 1px #b42525 dashed;
            position: relative;
        }
        #second{
            background-color: aqua;
            border: 1px red dashed;
            position: absolute;
            left: 1100px;
        }
        #third{
            background-color: aquamarine;
            border: 1px yellow dashed;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

固定定位（position: fixed;）位置是固定的，不动的

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow  ;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>元素1</div>
<div>元素2</div>
</body>
</html>

在这里插入图片描述
这里我们可以看到，固定定位下的元素2，无论浏览器的滑块怎么移动，元素2都不会跟随移动始终保持在相对的位置。而在绝对定位条件下的元素1反而无法一直保持在相对位置，而是随着滑块的移动而移动。

z-index（图层）

图层便是相当于一个立体空间，我们可以通过z-index：（数字：代表层数）；来改变一个元素的在哪一层，进而改变它是否能够显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li{
            list-style: none;
        }
        #content{
            width:800px;
            overflow:hidden;
            border: 1px red solid;
        }
        /* 父级元素相对定位*/
        #content ul{
            position: relative;
        }
        .p1{
            width: 800px;
            height: 25px;
            background: #222222;
            color: white;
            position: absolute;
            bottom: 50px;
            z-index: 0;
        }
    </style>
</head>
<body>
<div id="content">
    <ul>
        <li><img src="image/1.jpg" alt=""></li>
        <li class="p1">学习</li>
        <li class="p2"></li>
        <li>时间2022</li>
        <li>地点</li>
    </ul>
</div>
</body>
</html>

运行结果：
在这里插入图片描述
这里的学习所在的文本域层级为0，仍然能够显示，并且在图片上方。
若是我们把层级调为-1；那么结果显然不能显示，而是如下面运行结果：

我们可以看大学习所在文本域无法显示，已经移到了低层。