将粘性图像彼此叠加

Question

目标:

在网站中向下滚动时，图像会随之移动并根据您滚动的距离发生变化。

我的计划:

将图片放在一起，让它们保持粘性。运行动画取决于滚动位置。

我的问题：

我有三张图片需要置顶。但是，它们也需要是绝对的才能相互叠加，这显然是矛盾的。我是不是从错误的方向来解决问题？

别想太多关于动画的东西，我会想办法的。现在我只需要帮助将图像放在彼此的顶部，同时保持粘性。

当前代码： https://codepen.io/alsb/pen/oNwZYQw

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"href="style.css">
    <title>Document</title>
</head>
<body>
    <h1>Hello to Sticky World</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Numquam et blanditiis repellendus voluptas iusto recusandae quis 
        quos iure quod eos possimus ad corrupti, nam asperiores, 
        minima quisquam praesentium neque ratione?
    </p>
    <div class="container">
        <img class="item" src="https://picsum.photos/300/200" />
        <img class="item" src="https://picsum.photos/300/200" />
        <img class="item" src="https://picsum.photos/300/200" />
    </div>

    <p>...</p>
</body>
</html>

.sticky-container {
    height: 100%;
}

img.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    width: 200px;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    border: 2px dashed rgba(114, 186, 94, 0.35);
    height: 400px;
    background: rgba(114, 186, 94, 0.05);
  }
  
  .item {
    position: sticky;
    top: 1rem;
  }

Answer 1

解决方案是不使用 <img>。最里面的 div 将是粘性的，包裹在绝对 div.

中

<div class="wrapper">
    <div class="container">
        <div class="item"></div>
    </div>
    <div class="container">
        <div class="item"></div>
    </div>
</div>

.wrapper {
    position: relative;
    width: 50vw;
}

.container {
    display: flex;
    position: absolute;
    justify-content: space-around;
    align-items: flex-start;
    border: 2px dashed rgba(114, 186, 94, 0.35);
    height: 900px;
    background: rgba(114, 186, 94, 0.05);
  }
  
  .item {
    position: sticky;
    top: 1rem;
    background-image: url("https://picsum.photos/500/300");
  }

将粘性图像彼此叠加

Placing sticky images on top of each other

html

css

animation