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

【问题标题】：How can we prevent that when I resize my window, my images move using HTML-CSS?我们如何防止当我调整窗口大小时，我的图像使用 HTML-CSS 移动？
【发布时间】：2016-09-24 09:41:47
【问题描述】：

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

当我调整我的窗口大小时，我的图片移动，我的图片的 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%;
  }

提前感谢您的帮助。

【问题讨论】：

您可以使用相对位置作为“#bloc_page” id。
感谢您的回答！它就在我的眼睛下面，但我没有看到它。它。

标签： html css image resize absolute

【解决方案1】：

您是否正在寻找这样的解决方案？

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

如果这个答案不是你想要的，那么请更详细地解释问题..

【讨论】：

我已经更改了帖子，希望它会更好。

【解决方案2】：

发生这种情况是因为您的 id 为“bloc_page”的 div 容器的静态宽度为 1097 像素。如果你把它设置成这样：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：