CSS---------定位

爱抽烟的老汉

已于 2023-07-18 18:00:11 修改

阅读量713

点赞数 1

文章标签： css 前端

于 2023-07-18 17:45:21 首次发布

本文链接：https://blog.csdn.net/Agont_/article/details/131792581

版权

一、CSS定位

CSS 定位属性允许对元素进行定位改变其在页面的位置。
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
普通流中的元素的位置由元素在 HTML 中的位置决定。

二、相对定位

相对于自身的定位。

<style>/* 相对定位 
            相对自身定位

            通常配合绝对定位使用
        */
        .box{
            position: relative;
        }

三、绝对定位

相对于浏览器窗口的定位。
如果父盒子给定位属性，那就相对于这个父盒子定位。
逐级向上找，相对碰到的第一个有定位属性的父级盒子，如果没有那就相对浏览器定位。
子绝父相：
为了让绝对定位有定位点有定位点，一般会给他的父盒子加相对定位。

<style>
            /* 绝对定位 
                1.相对浏览器窗口定位
                2.父级有定位属性时，相对父级盒子定位
                3.逐级往上找，相对碰到的第一个有定位属性的父盒子定位，
                  如果没有，就相对浏览器定位
            */

            /* 子绝父相
                为了让绝对定位有定位点，一般会给他的父盒子加相对定位
            */

            /* 
            z-index
                设置堆叠顺序的
                1.默认是z-index：1
                2.数字越大越靠前显示
                3.数字越小比如负数越靠后显示            
            */
            .div1{
                position: relative;
                top: 0;
                left: 0;
            }
            .div2{
                width: 200px;
                height: 200px;
                background-color: pink;
                position: relative;
                top: 0;
                left: 0;
            }
        </style>

四、固定定位

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

固定定位：不管页面如何滚动，他都永远固定在那里
固定定位的用途：“返回顶部”、“楼层导航”

 <style>
        .box1{
            height: 10000px;
        }
        .box2{
            /* 固定定位
            相对于浏览器窗口定位，不随页面滚动改变位置
         */
         position: relative;
         right: 40px;
         bottom: 40px;
         width: 60px;
         height: 300px;
         background-color: pink;
        }
    </style>

五、粘性定位

(这是 css3 新增的属性值)粘性定位。最初会被当作是relative，相对于原来的位置进行偏移；
一旦超过一定阈值之后，会被当成 fixed定位，相对于视口进行定位position:sticky ，其支持还不是很普遍。

相对于原来的位置进行偏移。

<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>