Control CSS image and text overlay

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, how can I 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"/><divid="texto">Texto que fica sobre a imagem</div>

</body>
</html>
    
asked by anonymous 24.06.2016 / 01:21

1 answer

2

If below is overlapping, use z-index in css. The higher, the higher the layer. If the item that should be more "over" is the text:

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