Css中的绝对/相对/固定/定位/层叠顺序_css 绝对定位在相对定位层级后面-优快云博客

本文链接：https://blog.youkuaiyun.com/xiahang1121/article/details/89873281

本文深入探讨了CSS中的定位概念，包括绝对定位、相对定位和固定定位的差异，以及它们如何影响元素在页面布局中的位置。同时，详细解释了层叠顺序（z-index）的工作原理，帮助开发者更好地理解和控制网页元素的堆叠次序。

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对/相对/固定定位</title>
        <style type="text/css">
            .outdiv{
            
                border: 1px solid blueviolet;
                width: 686px;
                height: 1086px;
                margin-top: 80px;
                margin-left: 20px;
            }
            /**/
            .div1{
                /*1,一旦写了绝对定位,就会相对于他的上级元素(父级元素)移动单坐标原点
                  坐标原点是最左最上的角的小点,2,当使用了绝对定位其他元素将挤上来,
                  且浮动上来的元素如果和定位元素重合,浮动上来的元素将被覆盖
                  4,如果写了横纵坐标top left 那么他讲相对于整整张网页的坐标原点
                  来定位,不再是父级元素的坐标原点,5,绝对定位是脱离了正常文档流的
                   不考虑他周围其他元素的无论什么布局.6如果他的父级元素也写了绝对定位那么
                   子级元素的绝对定位将相对于父级元素进行绝对定位(也就是成了相对定位)*/
                position: absolute ;
                z-index: 1;
                top: 20px;
                left: 180px;
                border: 1px solid red;
                width: 286px;
                height: 198px;
                background-color: green;
            }
            .div2{
                /*相对定位就是相对于自己的父级元素来定位,
                 父级元素的坐标原点就是相对定位的坐标原点*/
                position: relative;
                /*层叠顺序,当这个值为负数的时候将作为背景显示,数字越大越靠前,数字大的会覆盖数字小的*/
                z-index: -1;
                top: 20px;
                left: 58px;
                border: 1px solid blue;
                height: 86px;
                width: 800px;
                background-color: red;
                
            }
            .div3{
                /*固定定位,不管页面如何拖动滚动我都在这里,其他的定位会因为页面拖动而动*/
                position: fixed;
                bottom: 10px;
                right: 20px;
                border: 1px solid gold;
                width: 286px;
                height: 186px;
                background-color: blue;
            }
            
        </style>
    </head>
    <body>
        <div>
            <div class="outdiv">
                <div class="div1">
                    <span>我是第一个div</span>
                </div>
                <div class="div2">
                    <span>我是第二个div</span>
                </div>
                <div class="div3">
                    <span>我是第三个div</span>
                </div>
                
            </div>
        </div>
    </body>
</html>