随着div的滚动，绝对元素也会滚动_使用可滚动div裁剪固定/绝对元素_动画元素基于滚动位置的绝对div溢出: scroll - 腾讯云开发者社区

随着div的滚动，绝对元素也会滚动

基础概念

在HTML中，div 是一个块级元素，可以通过CSS设置其样式和行为。当 div 具有滚动条时（即 overflow: auto 或 overflow: scroll），其内部的绝对定位元素（position: absolute）的行为可能会引起一些混淆。

类型

固定定位（position: fixed）：元素相对于浏览器窗口定位，即使页面滚动也不会移动。
相对定位（position: relative）：元素相对于其正常位置定位。
绝对定位（position: absolute）：元素相对于最近的非 static 定位的祖先元素定位。

应用场景

导航栏：固定定位的导航栏可以在页面滚动时保持在顶部。
弹出框：绝对定位的弹出框可以相对于某个特定元素定位。

问题描述

当 div 滚动时，绝对定位的元素也会跟随滚动。这是因为绝对定位的元素是相对于其最近的非 static 定位的祖先元素定位的。如果这个祖先元素是 div，并且 div 可以滚动，那么绝对定位的元素也会跟随滚动。

原因

绝对定位的元素是相对于其最近的非 static 定位的祖先元素定位的。如果这个祖先元素是可滚动的 div，那么绝对定位的元素也会跟随滚动。

解决方法

如果你希望绝对定位的元素在 div 滚动时保持固定位置，可以将其最近的祖先元素设置为固定定位或相对定位，并确保这个祖先元素不滚动。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Example</title>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 300px;
            overflow: auto;
            border: 1px solid black;
        }

        .fixed-element {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="fixed-element"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
    </div>
</body>
</html>

在这个示例中，.fixed-element 是绝对定位的元素，.container 是可滚动的 div。由于 .fixed-element 是相对于 .container 定位的，所以它在 .container 滚动时不会移动。