Menu
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.
636
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>Actually those properties are exactly what you need. Here's how to use them. Lets say your images have a class .overlay-img. Put them in a container with the class .img-container.
.img-container {
position: relative;
}
.overlay-img {
position: absolute;
top: 0;
left: 0;
}
The images should now be on top of each other. Using the z-index property you can also specify which one is on top. The higher the value you give, the higher the element will appear.
Since your container is relatively positioned, all absolute position children it has will be positioned relative to it, rather than the entire page.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
