html中的固定定位的用法


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body{
            height: 5000px;
        }
        /* 大盒子的样式 */
        .a1 {
            width: 40px;
            height: 40px;
            background-color:aqua;
        }
 
 
    style>
 
head>
 
<body>
    <div class="a1">
         测试盒子
    div>
body>
 
html>

2、效果如下，浏览器左上角有个盒子，右边有滚动条

3、我想让他像我们的csdn一样，这个盒子固定在右下角，然后不论怎么滑动滚动条，都一直在这个位置，这个时候就需要我们的固定定位出马了,只需要改一下盒子的样式就行了


        .a1 {
            width: 40px;
            height: 40px;
            background-color:aqua;
            position: fixed;
            top: 500px;
            left: 1100px;
        }

4、效果图如下：

总结

固定定位用 position: fixed;然后用方向词进行偏移，然后就固定起来啦！！！

看都看到这儿了，留下三连呗，谢谢各位看官老爷们儿！

相关阅读:
YOLOv5算法改进（19）— 手把手教你去更换NMS（DIoU-NMS/CIoU-NMS/EIoU-NMS/GIoU-NMS/SIoU-NMS）
TOGAF之架构标准规范（一）
UniApp调用SDK原生接口
ios上传图片旋转90度的解决办法 - nextcloud
基于springboot实现课程答疑管理系统项目【项目源码+论文说明】计算机毕业设计
python基于PHP+MySQL的连锁商店仓库管理系统
Python / Golang 时间与时间戳之间的相互转化
如何实现常见框架
JavaScript快速入门
【Java 进阶篇】HTML文本标签详解

原文地址：https://blog.csdn.net/qq_52545155/article/details/128004210