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代替。与固定位置不同，它受页面滚动的影响。

Answer 2

以下内容将所选图像放在右上角并将其保留在那里。将div容器放在任何适合的位置。实际上，它甚至可能是关闭body标签之前的最后一件事，并且仍然会生成右上角的图像。根据您的需求进行更改，例如宽度，高度，或看看calc（）。

<style type="text/css">
.bgi {
  position: fixed;
  top: 0;
  right: 0;
  background-image: url("bgi.jpg");
  background-position: 0 0;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
}
</style>

<div class="bgi"></div>

如何在页面的一角保持图像不变，但在向下滚动时不再可见？

2 个答案: