Menu
I have this html file where I want to overlay some text over another. I tried to use the z-index property but can't get it to work. What is missing in my code?
thanks a lot
Here is the code
<html>
<head>
<style>
#overlay {
z-index:100;
}
</style>
</head>
<body>
<div id='overlay'>overlayed text</div>
This is some dummy text
</body>
</html>
388
You need to set position: absolute. The z-index applies to elements that aren't statically positioned (see BoltClock's comment).
<html>
<head>
<style>
#overlay {
background-color: #EEEEEE;
position: absolute;
z-index:100;
}
</style>
</head>
<body>
<div id='overlay'>overlayed text</div>
This is some dummy text
</body>
</html>
You can do this with CSS alone by making use of :before
img.image:before {
left: 0;
content: "Coming Soon";
background: rgba(255, 255, 255, 0.59);
color: #000;
width: 100%;
height: 100%;
line-height: 2.5;
font-weight: 600;
position: absolute;
}z-index only applies to elements with position:relative or position:absolute. In your case you'll be wanted to use position:absolute to place the overlayed text.
1
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
