CSS 定位

最新推荐文章于 2024-03-18 17:20:19 发布

x_Alan_3

最新推荐文章于 2024-03-18 17:20:19 发布

阅读量211

点赞数 3

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/x_Alan_3/article/details/127350053

本文详细介绍了CSS中的position属性，包括相对定位、绝对定位、固定定位的概念及其应用。绝对定位会脱离文档流，而固定定位在页面滚动时保持位置不变。重叠元素可通过z-index来控制堆叠顺序，决定前后显示。未指定z-index时，元素顺序影响显示。

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

CSS position 属性

这个属性定义建立元素布局所用的定位机制，任何元素都可以定位，不过绝对和固定元素会生成一个块级，而不论元素本身是什么类型；

CSS 定位

值	描述
relative	相对定位，相对于原来的位置，不脱离标准文档流
absolute	绝对定位，脱离标准文档流，不保留原本的位置
fixed	固定定位，相对于浏览器窗口进行定位窗口滚动也不会移动

相对定位

相对定位元素的定位是相对其正常位置，可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            position: relative;
            top: 50px;
            left: 50px;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>

绝对定位

无父级或者无父级无定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            margin-top: 50px;
            margin-left: 50px;
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }

        .son {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>

</body>
</html>

父级有定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .yeye{
            position: relative;
            width: 800px;
            height: 800px;
            background-color: hotpink;
            padding: 50px;
        }
        .father{

            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son{
            position: absolute;
            left: 30px;
            bottom: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="yeye">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
</body>
</html>

固定定位

即使滚动元素也不会改变位置；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .divA{
            position: fixed;
            top: 100px;
            left: 40px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="divA">
    <img src="img/1.webp">
</div>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>

</body>
</html>

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index 属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position: absolute;
            top: 0;
            left: 0;

        }
        .divA{
            width: 200px;
            height: 200px;
            background-color: green;
            z-index: 1;
        }
        .divB{
            width: 200px;
            height: 80px;
            top: 100px;
            z-index: 2;
            background-color: skyblue;
        }
        .divC{
            width: 200px;
            height: 30px;
            top: 130px;
            z-index: 3;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="divA">
</div>
<div class="divB">
</div>
<div class="divC">
</div>
</body>
</html>