CSS之固定定位

最新推荐文章于 2022-10-03 19:20:55 发布

极客研究者

最新推荐文章于 2022-10-03 19:20:55 发布

阅读量1.2k

点赞数

分类专栏： CSS样式表文章标签： css css3

本文链接：https://blog.csdn.net/qq_34550459/article/details/105573498

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

固定定位:将元素的position属性设置为fixed,
固定定位也是一种绝对定位,大部分性质和绝对定位一样
唯一不同点:固定定位永远参照于浏览器窗口进行定位

固定定位的元素不会随着滚动条的滚动而滚动(固定在某一位置)

Demo:

<!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">
    <title>固定定位</title>
    <style>
    .box1{
        width:200px;
        height:200px;
        background-color:seagreen;     
    }

    .box2{
        width:200px;
        height:200px;
        background-color:darkorange;        
        
        /*开启固定定位 */
        position: fixed;
        left:0px;
        top:0px;

        /* 
        使用
        left:0px;
        top:0px;
        来检测相对定位或者绝对定位的参照点
         */   
    }

    .box3{
        width:200px;
        height:200px;
        background-color:deeppink;
        
    }
    .box4{
        width:300px;
        height:300px;
        background-color:green;
    }

    .box5{
        width:400px;
        height:400px;
        background-color:lightsalmon;
    }
    </style>
</head>
<body>
        <div class="box1">1</div>
        <div class="box4">
            4
            <div class="box5">
                5
                <div class="box2">2</div>
            </div>
        </div>
        
        <div class="box3">3</div>

</body>
</html>

极客研究者

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS之固定定位

固定定位:将元素的position属性设置为fixed,固定定位也是一种绝对定位,大部分性质和绝对定位一样唯一不同点:固定定位永远参照于浏览器窗口进行定位固定定位的元素不会随着滚动条的滚动而滚动(固定在某一位置)Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...
复制链接

扫一扫

专栏目录