Position属性值的相关解析

Dummerd

于 2022-07-07 20:44:30 发布

阅读量101

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/Dummerd/article/details/125666710

版权

本文详细解读了CSS position属性的五个值：relative（相对定位）、absolute（绝对定位，脱离文档流）、fixed（固定定位），并通过实例演示了如何应用这些概念于div元素布局。理解这些区别对于网页布局至关重要。

摘要由CSDN通过智能技术生成

position的属性值有：
1. absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位(会脱离文档流)

2. fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。(会脱离文档流)

3. relative：相对定位，是相对于其原本的位置来定位的。(不会脱离文档流)

4. static：默认值，没有定位。

5. Inherit：继承父元素的position值。

首先来看position： relative 相对定位


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
        div {
            height: 50px;
            width: 50px;
        }
 
        .div1 {
            background-color: red;
        }
 
        .div2 {
            background-color: green;
        }
 
        .div3 {
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>
 
</html>

接下来我们对div2使用相对定位，增加样式position: relative;（相对定位）

top: 22px;left: 33px;

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
        div {
            height: 50px;
            width: 50px;
        }
 
        .div1 {
            background-color: red;
        }
 
        .div2 {
            background-color: green;
            position: relative;
            top: 22px;
            left: 33px;
        }
 
        .div3 {
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>
 
</html>

position： absolute 绝对定位（！注意这个会脱离文档流哦）

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
    #div {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            position: absolute;
            left: 110px;
            top: 110px;
        }
    </style>
</head>
 
<body>
 
    <div id="div"></div>
 
</body>
 
 
 
</html>

此时设置定位后距离顶部110px，距离左边110px

值得一提的是元素设置绝对定位后，他原本的位置会被其他元素占据，也就是所谓的脱离文档流