css position属性四个值：static、fixed、absolute和relative的区别和用法

最新推荐文章于 2025-02-06 17:45:59 发布

mus_木司

最新推荐文章于 2025-02-06 17:45:59 发布

阅读量697

点赞数

分类专栏：前端面试文章标签：定位 html css

本文链接：https://blog.youkuaiyun.com/mus123/article/details/104254388

版权

前端面试专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍了CSS中position属性的四个值：static、fixed、absolute和relative的区别和用法。重点讨论了relative和absolute的定位原理，并通过实例展示了它们在页面布局中的效果。内容包括各定位方式如何影响元素的位置，以及如何使用top、bottom、left、right和z-index进行调整。

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

参考：https://zhuanlan.zhihu.com/p/29207938
https://blog.youkuaiyun.com/tengliu6/article/details/52088743

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
3、relative（相对定位）：生成相对定位的元素（相对于他原来应该在的位置），通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　
4、absolute（绝对定位）：生成绝对定位的元素（会脱离文档流），相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

主要演示relative和absolute

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://code.jquery.com/jquery-2.1.0.js"></script>
    <style type="text/css">
        #left {
            background: #cccccc;
            width: 200px;
            height: 200px;
            float: left;
        }
        
        #center {
            background: #eee;
            width: 200px;
            height: 200px;
            float: left;
        }
        
        #right {
            background: #666666;
            width: 200px;
            height: 200px;
            float: left;
        }
        
        #d2 #center {
            position: relative;
            top: 10px;
            left: 10px;
        }
        
        #d3 #center {
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>
    <title>Position</title>
</head>

<body>
    <div style="width: 600px;">

        <div id="d1">
            <div id="left"></div>
            <div id="center" class="c1">
                <p>1 正常定位</p>
            </div>
            <div id="right"></div>
        </div>

        <div id="d2">
            <div id="left"></div>
            <div id="center" class="c2">
                <p>2 relative定位:相对于应该在的位置偏移</p>
            </div>
            <div id="right"></div>
        </div>

        <div id="d3" style="position: relative;top:15px; ">
            <div id="left"></div>
            <div id="center" class="c3">
                <p>3 absolute定位:给父级div设置relative可以让该div随父级相对固定</p>
            </div>
            <div id="right"></div>
        </div>

    </div>
</body>
<script>
    window.onload = function() {
        for (x = 1; x <= 3; x++) {
            $(".c" + x).append("</br>" + $(".c" + x).offset().left + " " + $(".c" + x).offset().top);
            console.log($(".c" + x).offset().left + "  " +
                $(".c" + x).offset().top);
            console.log($(".c" + x));
        }
    }
</script>

</html>

效果如下图
在这里插入图片描述
定位左8上8是默认存在的
第一行是正常的
第二行position:relative会导致center2在他应该在的位置偏移，仍然在文档流中。

#d2 #center {
    position: relative;
    top: 10px;
    left: 10px;
}

第三行position:absolute然后把他的父级div设置成非static并对父级top：15px，此处用relative。
可以看见center3脱离文档流，对应左上有偏移但是其top保证了10+15+8

#d3 #center {
    position: absolute;
    top: 10px;
    left: 10px;
}