元素的固定定位

最新推荐文章于 2022-08-04 20:44:29 发布

原创最新推荐文章于 2022-08-04 20:44:29 发布 · 437 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#元素固定定位

HTML5+CSS 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个简单的HTML页面实现返回顶部按钮的方法。该按钮使用固定定位(#back)，始终保持在屏幕底部右侧，即使用户滚动页面也能轻松点击回到页面顶端。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #back{
            width: 80px;
            height: 80px;
            background-color: red;
            text-align: center;
            line-height: 80px;
            position: fixed;
            bottom: 50px;
            right: 30px;
            z-index: 1000;/*数值越大越先显示*/
        }
    </style>
    <title>固定定位</title>
</head>
<body>
<div style="height: 1000px">
    <div id="back">
        返回顶部
    </div>
</div>
</body>
</html>