html - 如何防止固定图像向下滚动？

Question

我的页面右上角有一张图片。它是一个固定元素，所以每当我放大或缩小时，它都会按预期停留在浏览器的右上角。我不希望发生的事情是，当向下滚动页面时，图像随之出现。我希望它在放大/缩小时始终位于页面的右上角，但在我向下滚动时保持静止，因此它与位于此处的所有其他内容一起保留在页面顶部。这是元素的代码:

<div id="abox" class="Mbox"><a href="#" style="font-family:arial;font-size:120%;text-decoration:none;" title="title">Some text</a></div>

<div id="abox" class="Cbox"><a href="#" style="font-family:arial;fontsize:120%;
text-decoration:none;" title="title">Text</a>
</div>

<div style="position:absolute;>
<img class="imagebox" src="image.png" alt="alt" title="title">
<div id="textbox" style="margin-right:450px;">Some text here.</div>

以及相关的 CSS:

#abox {
position:relative;
}


.Mbox {
left:20px;
bottom:335px;
}


.Cbox {
left:45px;
bottom:505px;
}


#longbox {
width:50000px;
height:50px;
position:relative;
bottom:8px;
right:8px;
}



.imagebox {
width:45px;
height:27px;
padding:0px;
border:0px;
margin:0px;
}

我尝试使用 absolute，但是当使用 right:0px 时，无论我缩小多少我都找不到图像 - 它消失了。相反，我尝试将它从左侧移动(例如:left:900px)，但是当我缩小时，它显然并没有一直向右移动。当使用 float:right;我的形象也消失了。这些可能无关紧要，但值得一提。

最终，我希望图像在缩小(/缩小)时继续向右移动以保持在右上角的意义上是交互式的，但是当向下滚动时我不希望它跟随.

非常感谢。

更新:我已经添加了更多的 HTML 和 CSS，并尝试了绝对方法只让图像保持消失。当我返回 position:fixed;right:0px;top:10px; 获取图像的嵌入式 CSS 时，我返回到原始问题，它按预期留在 Angular 落但仍在跟踪我的卷轴。

Answer 1

如果我使用绝对位置，我不会发现任何变化。我设置了一个额外的 div 类测试。有一个高度.. 不，你可以测试它。放大和缩小。你会在同一个地方找到 abc div

.abc{
  position: absolute;
  right: 10px;
  top: 10px;
  background: red;
}
.test {
  height: 200vh;
  background: blue;
}

<div class="abc">
 <img class="box" src="a src" alt="an alt" title="a title">
</div>
   <div class="test">
   </div>