我有一张应用了以下代码的图片:
<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;
}
忽略旧代码。使用此代码,无论我放大或缩小多远,我的图像都不再显示在页面上。我尝试使用左键来定位它,但是当缩小时它不会停留在那个固定的屏幕位置。
最佳答案
使用 position: absolute 代替。 与固定位置不同,它受页面滚动的影响。
关于html - 如何将图像始终保持在页面的 Angular 落,但向下滚动时不再可见?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40432659/