如何在缩放 in/out 时将图像保留在我的网页的右上角？

Question

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

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

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

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

Answer 1

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

Answer 2

see the fiddle

重要的是：

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

总是放在top_right角

并在您的 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>

Answer 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>

Answer 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>

如何在缩放 in/out 时将图像保留在我的网页的右上角？

How to keep an image in the top right corner of my webpage when zooming in/out?

html

css

position