Question

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

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

我已经在寻找同时使用＆＃34;％＆＃34;而不是＆＃34; px＆＃34;而且还使用＆＃34; position：relative;＆＃34;。不幸的是，在我的情况下，我不能把这个＆＃34;位置：相对;＆＃34;因为要覆盖我的照片，我不得不设置＆＃34;位置：绝对;＆＃34;。

这是我的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

只需要为＆＃34;＃bloc_page＆＃34;添加相对位置ID

{{1}}

Answer 3

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

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

如果这个答案不是您的答案，那么请更详细地解释一下这个问题。

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

3 个答案: