CSS: el índice z no funciona correctamente

Estoy usando z-index en mi página (ya no se necesita enlace), y no funciona correctamente: no coloca ciertos div encima de todos los demás.CSS: el índice z no funciona correctamente

Puede verlo usted mismo haciendo clic en uno de los elementos en la barra izquierda o derecha. Luego, la máscara se desvanecerá, pero mostrará el cuadro de mensaje debajo de ella. Lo he intentado mucho, pero simplemente no puedo mostrar el cuadro de mensaje sobre todos los demás ...

¿Qué puedo hacer para solucionar esto?[Nota: segunda pregunta a continuación]

Si no desea comprobar la página, el cuadro de mensaje se encuentra en algunos otros divs:

posicionamiento

<div> 
<div> 
    <div>message box</div> 
</div> 
</div>

El CSS es la siguiente:

.window { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: 100; 
}

utilizo posición: fijo, porque la posición: absoluta no es absoluto aquí, el div no está alineado con el cuerpo, sino otra cosa alguna manera. ¿Hay alguna forma de restablecer el posicionamiento y la posición absoluta de nuevo?

Fuente

2011-11-28 laarsk

+11

z-index solo funciona cuando se aplica a elementos que tienen el mismo tipo de posicionamiento. Por lo tanto, si un elemento está fuera de dom vía absoluta u otra posición, entonces su índice z no será relativo a otros elementos en el dom sino solo a elementos que tienen el mismo tipo de posicionamiento. – Ryan

¿Está bien, entonces un objeto fijo simplemente no puede superponerse a un objeto absoluto? – laarsk

correcto porque de acuerdo con el índice zy el dom no están realmente relacionados entre sí y, de hecho, porque un objeto absoluto está fuera del dominio, el fijo ni siquiera sabe que está allí para ir encima de él. – Ryan

Si estás usando jQuery comprobar el top Z Index Plug In, se puede aplicar cuando el objeto tiene un ratón sobre evento como:

<div id="modal" onmouseover="$(this).topZIndex();"></div>

a continuación, cambiar la posición de absoluta con jQuery también o viceversa:

$(document).ready(function(){ $('#modal').css('position','absolute'); });

Fuente

2011-11-28 21:53:47 raphie

Hmmm, no parece para trabajar ... He incluido en otra secuencia de comandos jQuery, pero ahora me da el error de que launchWindow no está definido ... ¿alguna pista de qué hacer? Además, la posición debe ser 'fija', como describí anteriormente , ¿eso también funcionará? – laarsk

Ahora he puesto la línea '' sobre el otro script, y no hay más errores. Sin embargo, el problema del índice Z sigue siendo el mismo ... – laarsk

¿El div está dentro de un iframe u otro div? – raphie

screenshot

si se quita z-index de #leftbar se soluciona el problema. La posición no debería importar, siempre y cuando tengas una.

Fuente

2011-11-28 21:58:20 Michael

Desafortunadamente, ese índice z es necesario para el resto de la página :(¿Quizás conozcas otra solución? – laarsk

cuando abras la ventana emergente, quita #leftbar z-index, cuando cierra la ventana emergente, agréguela de nuevo. :) – Michael

Otra solución sería tener un diseño de 3 columnas donde el mapa no tiene un ancho del 100%, entonces no necesitaría un índice Z en las columnas. – Michael

Desde que puedo recordar, los problemas del índice Z a menudo provienen del hecho de que los padres de los elementos indexados z no están posicionados. Los padres de hermanos deben estar posicionados.

Fuente

2011-11-29 11:07:09

CSS: el índice z no funciona correctamente

Respuesta

Cuestiones relacionadas