How to place a text under an image that has z-index -1 | Sololearn: Learn to code for FREE!
Neuer Kurs! Jeder Programmierer sollte generative KI lernen!
Kostenlose Lektion ausprobieren
0

How to place a text under an image that has z-index -1

So I have to place the text under an image. That said image has z-index whose property is -1 meaning its in the background. Now i don't want the text to go over it i need it to stay underneath the image without moving upwards. I need a better solution for this i tried everything but it always went over the picture.

30th Nov 2022, 9:24 PM
Iva Jelavi─ç
Iva Jelavi─ç - avatar
3 Antworten
0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Placing Text Over an Image in CSS </title> <style> .box{ position: relative; display: inline-block; /* Make the width of box same as image */ } .box .text{ position: absolute; z-index: 999; margin: 0 auto; left: 0; right: 0; top: 40%; /* Adjust this value to move the positioned div up and down */ text-align: center; width: 60%; /* Set the width of the positioned div */ } </style> </head> <body> <div class="box"> <img src="" alt="Flying Kites"> <div class="text"> <h1>Flying Kites</h1> </div> </div> </body> </html>
30th Nov 2022, 9:52 PM
Abdul Qadeer
Abdul Qadeer - avatar
0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Placing Text Over an Image in CSS </title> <style> .box{ position: relative; display: inline-block; /* Make the width of box same as image */ } .box .text{ position: absolute; z-index: 999; margin: 0 auto; left: 0; right: 0; top: 40%; /* Adjust this value to move the positioned div up and down */ text-align: center; width: 60%; /* Set the width of the positioned div */ } </style> </head> <body> <div class="box"> <img src="" alt=""> <div class="text"> <h1>Flying Kites</h1> </div> </div> </body> </html>
30th Nov 2022, 9:53 PM
Abdul Qadeer
Abdul Qadeer - avatar
0
my code is not showing in the answer.
30th Nov 2022, 9:54 PM
Abdul Qadeer
Abdul Qadeer - avatar