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

Question

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

当我调整我的 window 我的图片时，我的图片的 x 和 y 位置是相同的但是因为 window 更小，坐标相对于这个 window使我的图像不在所需位置。

我已经在寻找既使用“%”而不是 "px" 定位又使用 "position: relative;" 的解决方案。不幸的是，在我的情况下，我不能放这个 "position: relative;" 因为要覆盖我的照片，我必须使用 "position: absolute;".

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

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

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

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

Answer 2

发生这种情况是因为您的 div 容器的 ID "bloc_page" 的静态宽度为 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>

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

Answer 3

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

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

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

How can we prevent that when I resize my window, my images move using HTML-CSS?

html

css

resize

image

absolute