Pregunta z-index no funciona con posición absoluta


Abrí la consola (chrome \ firefox) y ejecuté las siguientes líneas:

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");

El #popupContent debe estar por encima de todo pero se ve afectado por la opacidad #popupFrame.

El contenido no está contenido en #popupFrame, lo que hace que esto sea muy extraño.

El objetivo es crear Firefox como cuadro de alerta

Apreciaré cualquier tipo de ayuda.

Gracias por adelantado.


74
2018-01-23 15:47


origen


Respuestas:


El segundo div es position: static (valor predeterminado) por lo que el índice z no se aplica a él.

Necesita posicionar (establecer la propiedad de posición en cualquier otra cosa que no sea static, probablemente quieras relative en este caso) cualquier cosa que quieras dar z-index a.


164
2018-01-23 15:50



La opacidad cambia el contexto de su índice z, al igual que el posicionamiento estático. O agregue opacidad al elemento que no lo tiene o elimínelo del elemento que sí lo tiene. También deberá colocar los dos elementos en posición estática o especificar la posición relativa o absoluta. Aquí hay algunos antecedentes sobre contextos: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/


28
2018-01-23 15:49



z-index solo se aplica a los elementos a los que se ha asignado una posición explícita. Añadir position:relative a #popupContent y deberías estar listo para ir.


21
2018-01-23 15:51



Una vieja pregunta, pero esta respuesta podría ayudar a alguien.

Si está tratando de mostrar el contenido del contenedor fuera de los límites del contenedor, asegúrese de que no tenga overflow:hidden, de lo contrario, se cortará cualquier cosa que esté fuera de él.


7
2018-02-15 15:33