Mil*_*ine 5 html css image z-index
我搜索了几个小时，但没有找到解决问题的方法。
我想将两张图片叠加到另一张图片上，尽管有几十个关于此的教程，但我没有来申请我的案例。
我能够通过这些教程看到，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>
预先感谢您的帮助。
如果你想将一张图片覆盖在另一张图片上，你只需要让第二张图片有一个绝对位置，并使用 z-index 确定哪个将在顶部，如下所示：
.top {
position: absolute;
left: 100px;
top: 100px;
border: 1px solid black;
z-index: 1;
}<div>
<img src="http://placehold.it/150x150">
<img class="top" src="http://placehold.it/150x150">
</div>实际上，这些属性正是您所需要的。以下是如何使用它们。假设您的图像有一个 class .overlay-img。将它们与 class 放在一个容器中.img-container。
.img-container {
position: relative;
}
.overlay-img {
position: absolute;
top: 0;
left: 0;
}
图像现在应该在彼此之上。使用该z-index属性，您还可以指定哪个位于顶部。您提供的值越高，元素出现的位置就越高。
由于您的容器是相对定位的，它拥有的所有绝对位置子项都将相对于它定位，而不是整个页面。