gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:26:27 25 4
gpt4 key购买 nike

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

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

我已经在寻找既使用“%”而不是“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%;
}

预先感谢您的帮助。

最佳答案

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

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

关于html - 当我调整窗口大小时,我们如何防止图像使用 HTML-CSS 移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37459941/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com