css固定定位

最新推荐文章于 2024-08-06 10:00:00 发布

青柠杆菌

最新推荐文章于 2024-08-06 10:00:00 发布

阅读量85

点赞数

本文链接：https://blog.csdn.net/jjlome/article/details/121691776

版权

CSS 固定定位视觉窗口滚动布局

关键词由CSDN通过智能技术生成

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--固定定位fixed-->
    <!--固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在游览器页面滚动使元素的位置不会改变-->
    <!--语法：-->
    <!--选择器{ position：fixed；}-->
    <!--固定定位的特点：-->
    <!--1.以浏览器的可视窗口为参照点移动元素-->
    <!--更父元素没有任何关系-->
    <!--不随滚动条滚动-->
    <!--2.固定定位不在占有原先位置-->
    <!--固定定位也是脱标的，其实固定定位也可以看作使特殊的绝对定位-->
    <style>
        .dj {
            position: fixed;
            top: 100px;
            right: 400px;
        }
    </style>
</head>
<body>
    <div class="dj">
        <img src="r_dj.png" alt="" />
    </div>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>
    <p>123456789123456789</p>

</body>
</html>

青柠杆菌

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title>  
复制链接

扫一扫