html - 如何将图像始终保持在页面的 Angular 落，但向下滚动时不再可见？

Question

我有一张应用了以下代码的图片:

<div id="container" style="position:fixed;right:0px;top:27px;">

无论我放大或缩小多少，这都会将图像保留在我的页面的右上角，这正是我所期望的。问题是，因为它的位置是固定的，所以当我向下滚动时，图像也会向下移动页面。我希望它在放大和缩小时留在页面的右上角，但在我向下滚动时它不会跟着我。

这方面的一个很好的例子是，当一个人进入谷歌时，它有一个“登录”按钮，它执行我的图像当前所做的事情，但如果向下滚动则不会跟随用户(可能必须放大才能滚动向下)。我试着查看 Google 的源代码，但我相信他们导入了一个外部 CSS 文件。

如果有人能帮我解决这个问题，我将不胜感激。

更新:这是尝试 position:absolute 后的代码

<div style="position:absolute;right:0px;top:10px;">
<img class="box1" src="a src" alt="an alt" title="a title">
    <div class="box2">
        <a href="#" style="padding:21.6px 8.5px 7px 8px;background-color:#ffa939;"><img
    src="a src" alt="an alt" style="width:45px;height:27px;" title="a title"></a>
    </div>
</div>

和相关的CSS

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


.box2 {
visibility:hidden;
position:relative;
top:5px;
right:8px;
width:65.5px;
margin:0px;
border:0px;
}

忽略旧代码。使用此代码，无论我放大或缩小多远，我的图像都不再显示在页面上。我尝试使用左键来定位它，但是当缩小时它不会停留在那个固定的屏幕位置。

Answer 1

使用 position: absolute 代替。与固定位置不同，它受页面滚动的影响。