定位（相对、绝对、固定、粘性）

羚羊

已于 2023-08-01 14:53:34 修改

阅读量36

点赞数

文章标签： css 前端

于 2023-07-18 17:57:44 首次发布

本文链接：https://blog.csdn.net/m0_63451432/article/details/131793178

版权

文章目录

定位（position）：

定位（position）：

        使用 top、right、bottom 和 left 属性来调整元素的位置。

1、相对定位relative

            relative  以自己为参照物

<style>
        .div1{
            width: 500px;
            height: 500px;
            background-color: aqua;
            position: relative;
            top: 70px;
            left: 60px;
        }
     </style>
<body>
    <div class="div1"></div>
</body>

2、绝对定位absolute

            absolute  
            以最近的具有定位的祖先元素进行定位。如果没有符合条件的祖先元素，则相对于文档的初始包含块(页面窗口)进行定位。
            一般为  子绝父相

z-index : 改变同级的上下叠放次序默认是0

<style>
        .div1{
            background-color: aquamarine;
            width: 500px;
            height: 500px;
            position: relative;
        }

        .div2{
            background-color: blue;
            width: 200px;
            height: 200px;
            position: absolute;

        }
        .div3,.div4{
            background-color: rgb(139, 251, 111);
            width: 200px;
            height: 100px;
            position: absolute;
            z-index: 5;
            left: 150px;
        }

    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
    </div>
</body>

3、固定定位relative

            fixed
            会以浏览器窗口进行定位，元素的位置在滚动时不会改变。

<style>
        .div1{
            height: 200px;
            width: 100px;
            background-color: aqua;
            position: fixed;
            right: 20px;
            bottom: 200px;
        }
        .div2{
            height: 5000px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

4、粘性定位sticky

            sticky
            css3新增属性
            元素会像相对定位一样保持在其正常文档流中的位置，但当页面滚动到特定位置时，会变为固定定位。这意味着元素在滚动
            时会“黏在”指定位置， 并在滚动到达某一阈值时固定在那个位置，直到滚动到达另一阈值。(支持不是很普遍)

<style>
        .div1{
            position: sticky;
            top: 100px;
        }

        .div4{
            height: 4000px;
        }
     </style>


</head>
<body>
    <div class="div1">111</div>
    <div class="div2">222</div>
    <div class="div3">333</div>
    <div class="div4">444</div>
    
</body>

羚羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
定位（相对、绝对、固定、粘性）

以最近的具有定位的祖先元素进行定位。如果没有符合条件的祖先元素，则相对于文档的初始包含块(页面窗口)进行定位。元素会像相对定位一样保持在其正常文档流中的位置，但当页面滚动到特定位置时，会变为固定定位。时会“黏在”指定位置，并在滚动到达某一阈值时固定在那个位置，直到滚动到达另一阈值。使用 top、right、bottom 和 left 属性来调整元素的位置。会以浏览器窗口进行定位，元素的位置在滚动时不会改变。z-index : 改变同级的上下叠放次序默认是0。relative 以自己为参照物。
复制链接

扫一扫