前端的学习之路：初级CSS---固对定位

最新推荐文章于 2023-06-02 10:59:13 发布

new-SkyWaller

最新推荐文章于 2023-06-02 10:59:13 发布

阅读量141

点赞数

分类专栏：初级CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113705165

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

固对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固对定位</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.22.03.css"> -->
    <style>
        body{
        font-size:60px;
        height: 2000px;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: blue;
        /* 
        固定定位：
                -将元素的position属性设置为fixed则开启了元素的固定定位
                -固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
                    唯一不同的是固定定位永远参照于浏览器的视口进行定位
                    固定定位的元素不会随网页的滚动条滚动
        */
        position: fixed;
        left: 400px;
        top: 8px;

    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
    .box4{
        width: 400px;
        height: 400px;
        background-color: tomato;
        
    }
    .box5{
        width: 300px;
        height: 300px;
        background-color: chartreuse;
         
    } 
    </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>

运行结果为：
在这里插入图片描述

new-SkyWaller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的学习之路：初级CSS---固对定位

固对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固对定位</title> <!-- <link rel="stylesheet" href=
复制链接

扫一扫