millet antoine millet antoine - 6 months ago 20
CSS Question

How overlay two pictures to another using HTML-CSS?

I searched for a few hours and I don't find solution to my problem.

I would like to overlay two pictures to another, despite the tens of tutorials about this, I don't arrive to apply to my case.

I was able to see through these tutorials, CSS has a atribut "z-index" that allows to in the background images.
I also could see the absolute and relative position property but I'm not sure the solution to my problem is related to these properties.

here is the part of the code where i would like a solution of my problem:

<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>


here is my full html code:

<!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>




Thank you in advance for your help.

Answer

If you want to overlay a image over another one you just have to make the second one have an absolute position, and with z-index determine wich one will be on the top, like this:

.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>