Question

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

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

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

想对我的形象做同样的事情，浮动：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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

3 个答案: