css中图片不随滚动条滚动

基础概念

CSS中的position: fixed;属性可以让元素相对于浏览器窗口固定位置，不随滚动条滚动。

优势

固定位置：元素始终保持在屏幕的固定位置，无论用户如何滚动页面。
用户体验：常用于导航栏、侧边栏、广告等，提供持续的视觉焦点。

类型

固定定位：position: fixed;
绝对定位：position: absolute;（相对于最近的非static定位的祖先元素）
相对定位：position: relative;（相对于其正常位置）

应用场景

导航栏：固定在页面顶部，方便用户随时访问。
侧边栏：固定在页面一侧，提供额外的信息或工具。
广告：固定在页面的某个位置，确保用户能看到广告内容。

问题及解决方法

问题：图片不随滚动条滚动

原因：可能是没有正确设置CSS的position属性。

解决方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Image Example</title>
    <style>
        .fixed-image {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;">
        <!-- 页面内容 -->
    </div>
    <img src="your-image-url.jpg" alt="Fixed Image" class="fixed-image">
</body>
</html>

解释：