css不随滚动条

CSS不随滚动条移动的基础概念

CSS（层叠样式表）是用于描述HTML文档样式的语言。当提到CSS不随滚动条移动时，通常是指页面中的某个元素或其样式在用户滚动页面时保持固定位置不变。

类型

固定定位（Fixed Positioning）：使用position: fixed;属性，元素会相对于浏览器窗口固定位置，不会随页面滚动而移动。
粘性定位（Sticky Positioning）：使用position: sticky;属性，元素在滚动到特定位置时会变得固定，但在达到这个位置之前会表现得像一个相对定位的元素。

应用场景

导航栏：固定在页面顶部的导航栏，确保用户在任何滚动位置都能看到。
悬浮工具栏：在页面滚动时始终显示的工具栏，提供快速访问功能。
侧边栏：固定在页面一侧的侧边栏，提供额外的信息或功能。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed CSS Example</title>
    <style>
        .fixed-element {
            position: fixed;
            top: 10px;
            left: 10px;
            background-color: red;
            padding: 10px;
            color: white;
        }
        .content {
            height: 2000px;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div class="fixed-element">I am fixed!</div>
    <div class="content">
        Scroll down to see the fixed element.
    </div>
</body>
</html>