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

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

1 个答案: