我搜索了几个小时，但没有找到解决问题的办法。
我想将两张图片叠加到另一张图片上，尽管有数十个关于此的教程，但我没有到达适用于我的案例。
我能够通过这些教程看到，CSS 有一个允许在背景图像中使用的属性“z-index”。 我也可以看到绝对和相对位置属性，但我不确定我的问题的解决方案是否与这些属性有关。
这是我想要解决问题的代码部分:
<img src='schema.png'>
<a href="#"><img src='Linkedin.png' width="30" height="30" ></a>
<a href="#"><img src='twitter.png' width="30" height="30" ></a>
这是我的完整 html 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="menuStyle.css" />
<title>Antoine</title>
</head>
<body>
<div id="bloc_page">
<header>
<div id="titre_principal">
<h1>Titre</span></h1>
<h2>Sous titre</h2>
<br>
</div>
</header>
<ul id="nav" style="clear:both;">
<li><a href="#">menu 1 ?</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul>
<img src='schema.png'>
<a href="#"><img src='Linkedin.png' width="30" height="30" ></a>
<a href="#"><img src='twitter.png' width="30" height="30" ></a>
<ul id="footer">
<br>
<li><a href="#">Plan du site</a></li>
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Nous contacter</a></li>
<ul>
</div>
</body>
预先感谢您的帮助。
最佳答案
实际上，这些属性正是您所需要的。下面是如何使用它们。假设您的图像有一个类 .overlay-img。将它们放入类为 .img-container 的容器中。
.img-container {
position: relative;
}
.overlay-img {
position: absolute;
top: 0;
left: 0;
}
图像现在应该在彼此之上。使用 z-index 属性，您还可以指定哪个在顶部。您给出的值越高，元素将显示得越高。
由于您的容器是相对定位的，因此它拥有的所有绝对位置子项都将相对于它定位，而不是整个页面。
关于html - 如何使用 HTML-CSS 将两张图片叠加到另一张图片上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37455968/