CSS的定位使用

最新推荐文章于 2024-10-14 20:26:39 发布

一杯美式&

最新推荐文章于 2024-10-14 20:26:39 发布

阅读量34

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_79371830/article/details/132656235

版权

定位

相对定位

相对自身定位
通常配合绝对定位使用

 <style>
        .box{
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>

绝对定位

1.相对浏览器窗口定位
2.父级有定位属性时，相对父级盒子定位
3.逐级往上找，相对碰到的第一个有定位属性的父盒子定位，如果没有，就相对浏览器定位
子绝父相
为了让绝对定位有定位点，一般会给他的父盒子加相对定位
z-index
设置堆叠顺序的
1.默认是z-index：1
2.数字越大越靠前显示
3.数字越小比如负数越靠后显示
position: relative;

    <style>
        .div1{
        
            position: relative;
            top: 0;
            left: 0;

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

固定定位

相对浏览器窗口定位，不随页面滚动改变位置

   <style>
        .box1{
            height: 10000px;
        }
        .box2{
            
            position: fixed;
            right: 40px;
            bottom: 40px;
            width: 60px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
————————————————

粘性定位

偏移量同相对定位
页面滚动时，滚动到顶部，直接吸顶

<style>
        .box2{
            position: sticky;
            top: 100px;
            left: 0;
        }
        .box6{
            width: 10px;
            height: 100000px;
        }
    </style>
</head>
<body>
    <div class="box1">111</div>
    <div class="box2">222</div>
    <div class="box1">333</div>
    <div class="box1">444</div>
    <div class="box1">555</div>
    <div class="box6">666</div>
</body>