html - 固定位置的图像显示在一个 div 中隐藏在其他 div 中

Question

我有多个位置固定的图像，它们都是相同的，但是这些图像应该只在包含其内容的 div 中可见，并隐藏在其他 div 的后面，但仍会随页面滚动。

我有一个例子，我从中得到了这个灵感，但我无法再次找到它，抱歉。

编辑:抱歉忘记了代码，段落只是用于测试滚动的占位符。

图像有一个固定的位置，应该只在它们所在的 div 中可见。

<div id="Over">
<div id="Job" class="grey">
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>

    <p>Blalbalblablalbalbalblbalbalab</p>
    v
    <p>Blalbalblablalbalbalblbalbalab</p>

    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    v
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <img class="changing" id="JobImage" src="~/images/JobRapati.png" />
</div>
<div id="Web">
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>

    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>

    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <img class="changing" id="WebImage" src="~/images/webdev.png" />
</div>
<div id="Game" class="grey">
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>

    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>

    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <img class="changing" id="GameImage" src="~/images/Unity_logo.png" />
</div>
<div id="App">
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>

    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>

    <p>Blalbalblablalbalbalblbalbalab</p>
    <p>Blalbalblablalbalbalblbalbalab</p>
    <img class="changing" id="AppImage" src="~/images/SummStats.png" />
</div>

CSS:

.changing
{
position: fixed;
right: 0;
top: 30%; 
}

Answer 1

我不是 100% 确定我回答了这个问题，但我认为没有一个简单的解决方案可以满足您的需求。你必须对它进行一些修改。

我为你做了一个codepen。是这样的吗？

html, body {
  width: 100%;
  height: 200%;
  margin: 0;
}

.container {
  z-index: 2;
  width: 100%;
  margin-top: 200px;
  height: 100%;
  background-color: red;
}

.img {
  position: fixed;
  z-index: -1;
  top: 30px;
  left: 20px;
  width: 50px;
  height: 50px;
  background-color: aquamarine;
}

和 HTML

<div class="img"></div>
<div class="container"></div>

https://codepen.io/montik/pen/JExLRW