Tengo este archivo html en el que quiero superponer texto sobre otro. Traté de usar la propiedad z-index pero no puedo hacer que funcione. ¿Qué falta en mi código?¿Cómo puedo superponer un texto sobre otro usando CSS?
muchas gracias
Aquí está el código
<html>
<head>
<style>
#overlay {
z-index:100;
}
</style>
</head>
<body>
<div id='overlay'>overlayed text</div>
This is some dummy text
</body>
</html>
Debe configurar position: absolute. El z-index se aplica a elementos que no están posicionados estáticamente (consulte el comentario de BoltClock).
<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>
z-index sólo se aplica a los elementos con position:relative o position:absolute. En su caso, querrá usar position:absolute para colocar el texto superpuesto.
Hola, gracias por su mensaje. De hecho, absoluto es lo que necesito en este caso. Saludos – eric01
Usted puede hacer esto con CSS solo haciendo uso de: antes
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;
}
Se aplica a cualquier elemento que no esté posicionado estáticamente. Eso significa que se aplica 'relative',' absolute' y 'fixed'. – BoltClock
Y si lo sitúa de esa manera, ni siquiera necesita el índice Z. –
Hola, muchas gracias por tu respuesta, resolvió mi problema. Saludos – eric01