Control image overlay and HTML CSS text

Asked

Viewed 5,653 times

0

Good evening, I would like to know how to control the order of image overlay and text in html, in the script below the text is above the image, as I can leave the text below the image?

<html>
<head>
<title>Texto sobre imagem</title>

<style>
#imagem {
width: 200px;
height 200px;
}

#texto {
position: absolute;
margin-top: -40px;
}
</style>

</head>

<body>
  

<img id="imagem" src="http://mdemulher.abril.com.br/sites/mdemulher/files/styles/retangular_horizontal_2/public/core/salada.jpg?itok=8ViA5vi2"/>
<div id="texto">Texto que fica sobre a imagem</div>

</body>
</html>

html css image

1 answer

2


If below is overlaid, use z-index in css. The higher, the more "top" the layer of it. If the item that should be "above" is the text:

#texto {
position: absolute;
margin-top: -40px;
z-index:9999;
}

Browser other questions tagged html css image

You are not signed in. Login or sign up in order to post.