position:fixed(相对于视窗来定位、一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）)...

weixin_33674976

于 2018-11-13 13:20:44 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5beaceb6e51d4528841398ca

本文深入探讨了CSS中fixed定位的应用，通过一个简单的HTML示例，展示了如何使用fixed属性将元素固定在页面的特定位置，无论页面如何滚动。文章详细解释了fixed定位的特性，包括其与浏览器窗口的关系，以及如何调整left、top、right和bottom属性来精确控制元素的位置。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11.fixed</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .fixed{
            position: fixed;
            width: 300px;
            height: 300px;
            left: 0;
            top: 0;
            background: greenyellow;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 50px;
        }
    </style>
</head>
<body>
<div class="fixed">
    把我固定
</div>
</body>
</html>
复制代码