当我调整窗口大小时，我们如何防止使用HTML-CSS移动图像？

Question

当我调整窗口大小时，我的图像如何移动？

当我调整窗口大小时我的图片移动，我的图片的x和y位置是相同的，但因为窗口较小，相对于此窗口的坐标使我的图像不在所需的位置。

我已经在寻找既使用“％”而不是“px”定位的解决方案，也使用“position：relative;”。 不幸的是，在我的情况下，我不能把这个“位置：相对;” 因为要覆盖我的照片，我不得不设置“位置：绝对;”。

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="menuStyle.css" />
    <title>Antoine</title>
</head>
<body>
    <div id="bloc_page">
        <div>
            <img src="schema.png">
            <img class="top" src="Linkedin.png" width="30" height="30">
        </div>
    </div>
 </body>
</html>

这是我的css代码：

 #bloc_page
 {
width: 1097px;
margin: auto;
 }

 body
 {
background-color: black; /* Le fond de la page sera noir */
 }

 .top {
  position: absolute;
  z-index: 1;
  bottom:10%;
  left: 80%;
  }

提前感谢您的帮助。

Answer 1

发生这种情况，因为id为“bloc_page”的div容器的静态宽度为1097px。 如果你把它设置为这样的东西：

  #bloc_page { width: 80%; margin: auto; } body { background-color: black; } .top { position: absolute; z-index: 1; bottom:10%; left: 80%; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="menuStyle.css" /> <title>Antoine</title> </head> <body> <div id="bloc_page"> <div> <img src="schema.png" /> <img class="top" src="Linkedin.png" width="30" height="30" /> </div> </div> </body> </html>

它将相对于浏览器大小移动。

Answer 2

只需要为“#bloc_page”id添加相对位置

 #bloc_page {
    position: relative;
    width: 1097px;
    margin: auto;
 }

Answer 3

你在寻找这样的解决方案吗？

.top {
    position: fixed;
    z-index: 1;
    bottom: 10%;
    left: 80%;
    max-width: 300px;
    max-height: 300px;
}

如果这个答案不是你以后的答案，那么请详细解释一下这个问题。

当我调整窗口大小时，我们如何防止使用HTML-CSS移动图像？

问题描述

3 个解决方案

解决方案1
1 2016-05-26 12:00:49

解决方案2
1 已采纳 2016-05-26 12:08:10

解决方案3
0 2016-05-26 11:49:50

当我调整窗口大小时，我们如何防止使用HTML-CSS移动图像？

问题描述

3 个解决方案

解决方案1 1 2016-05-26 12:00:49

解决方案2 1 已采纳 2016-05-26 12:08:10

解决方案3 0 2016-05-26 11:49:50

解决方案1
1 2016-05-26 12:00:49

解决方案2
1 已采纳 2016-05-26 12:08:10

解决方案3
0 2016-05-26 11:49:50