放大/缩小时如何将图像保留在网页的右上角？答案

【问题标题】：How to keep an image in the top right corner of my webpage when zooming in/out?放大/缩小时如何将图像保留在网页的右上角？
【发布时间】：2026-01-22 20:00:01
【问题描述】：

我的网页上有一张图片。该图像位于其自己的 div 中，我将其放置在 position:relative 以将其移动到页面上我想要的位置（大约右上角）。我的问题是，当我缩小页面时，图像不再出现在右侧，最终出现在页面的左侧/顶部中心（如您所料）。缩小时，我的页面有一段展开，但它在自己的 div 和图像下方，只是想我会提到，尽管它可能无关紧要。我希望图像在缩小时保持在原位，因此它不断向右移动以保持原位。 Google 示例：

在右侧以 100% 缩放登录框：https://snag.gy/9oMGVr.jpg

缩小时登录框仍在右上角：https://snag.gy/FXArO4.jpg

想对我的图像做同样的事情，float:right6 似乎不起作用。非常感谢。

【问题讨论】：

您为什么不检查 Google 网站的 HTML/CSS 以了解它们是如何在您的浏览器中执行此操作的？

标签： html css position

【解决方案1】：

see the fiddle

重要的想法是：

 position: fixed;
   right:0;
    top:0;

总是放在右上角

并在您的 html 中使用 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 应用，它将显示响应式设计

reference

<html>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <head>
    <style>
      .top_right{
  position: fixed;
width:70px;
height:30px;
margin:10px 5px auto;
background-color:blue;color:white;
right:0;
top:0;
box-sizing:border-box;
border:none;
}
 </style>
    </head>
  <body>
<button class="top_right">
SignIn
</button>
    </body>
  </html>

【讨论】：

【解决方案2】：

使用固定定位，然后它应该保持相对于浏览器或视口。

【讨论】：

【解决方案3】：

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<div class="col-xs-12">
<img class="pull-right img-responsive" src="images/img_c_2.jpg" />
</div>
  </body>

【讨论】：

【解决方案4】：

<html>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <head>
    <style>
      .top_right{
  position: fixed;
width:70px;
height:30px;
margin:10px 5px auto;
background-color:blue;color:white;
right:0;
top:0;
box-sizing:border-box;
border:none;
}
 </style>
    </head>
  <body>
<button class="top_right">
SignIn
</button>
    </body>
  </html>

【讨论】：