我们如何防止当我调整窗口大小时，我的图像使用 HTML-CSS 移动？
Posted
技术标签:
【中文标题】我们如何防止当我调整窗口大小时，我的图像使用 HTML-CSS 移动？【英文标题】：How can we prevent that when I resize my window, my images move using 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" >
</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。 感谢您的回答！它就在我的眼睛下面，但我没有看到它。它。 【参考方案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" />
</div>
</div>
</body>
</html>它将相对于浏览器大小移动。
【讨论】：
【参考方案3】：只需要为“#bloc_page”id 添加相对位置
#bloc_page
position: relative;
width: 1097px;
margin: auto;
【讨论】：
以上是关于我们如何防止当我调整窗口大小时，我的图像使用 HTML-CSS 移动？的主要内容，如果未能解决你的问题，请参考以下文章