div左下角浮动框

最新推荐文章于 2023-02-06 16:11:20 发布

霹雳弦惊

最新推荐文章于 2023-02-06 16:11:20 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：基础知识文章标签：前端 css html

本文链接：https://blog.youkuaiyun.com/qq_33501079/article/details/77986058

基础知识专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何仅使用HTML和CSS实现div元素在浏览器右下角的固定定位。文章分享了一种避免使用JavaScript的方法，并提供了一个具体的实现案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于div右下角浮动框这个问题，刚开始我把position的位置设置成了absolute。导致后面我一直想把box定位在浏览器右下角一直不成功。当时考虑的是通过doucument,documentElement.scrollTop或取的值加上box.offsetTop的值然后再赋给offsetTop。可是这样一直不成功，后面才清楚了offsetTop的属性是只读的。

后面从绝对定位开始考虑，想到fixed是生成绝对定位的元素，而且是相对于浏览器窗口的。恍然大悟。现在只要HTML和CSS就可以实现div左小角浮动框。去掉了js代码。

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <link type="text/css" href="gd.css" rel="stylesheet">
    <script type="text/javascript" src="gd.js"></script>
    <title>广告栏位置固定</title>
    </head>
    <body>
    <div id="box">
    </div>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    <p>撑开页面</p>
    

    </body>
    </html>

#bddy{
    margin: 0px;
}
#box{
    background: red;
    height: 200px;
    width: 200px;
    position: fixed;
    margin: 416px 0px 0px 0px;
}