z-index alcoholizado: Contenido por encima fondo por debajo (mismo elemento)

[pzin]

Muy buenas,

me está pasando una cosa muy muy extraña. He puesto un elemento por debajo (por ejemplo capa "cerveza" :) de otro con z-index. En principio todo marcha bien...

Los elementos que hay encima, son enlaces, y con la pseudoclase hover, le he puesto un fondo. Lo curioso es que al pasar el mouse por encima, el contenido del enlace queda superpuesto por encima de la capa cerveza. Correcto. Pero el fondo, se va para atrás del todo. Es decir, que me queda el fondo del enlace detrás, en medio me queda la cerveza, y por encima el contenido del enlace.

¿Estoy loco?

El caso, está por aquí, y la cerveza es el día numérico del mes, y los enlaces, pues los que hay por encima. He puesto el texto negro para que se vea mejor el efecto.

El problema ocurre en Firefox y Chrome. En el innombrable 7 y en Safari se ve como debería.


Bueno, saludos y gracias.
Si alguien da con ello le envío un mojo canario.

[jomaruro]

Hola:

¿Y ponerle a los enlaces otro z-index?

Saludos.

[pzin]

Hola jomaruro, gracias por responder.

Le he dado un índice mayor en z-index, y sigue igual. Muy extraño...

No sé si tendrá que ver que el DOCTYPE es strick, que ya hace tiempo me pasó algo parecido. Voy a cambiarlo a ver...

Edito: Cambiar el DOCTYPE tampoco ayuda.

[Mikmoro]

Iniciado por Bonez

Es decir, que me queda el fondo del enlace detrás, en medio me queda la cerveza, y por encima el contenido del enlace.

Me encantaría ayudarte pero no entiendo el problema en absoluto.

[PatomaS]

Hola

Bueno, aunque la explicación es un poco confusa, la mecánica de lo que ocurre parece tener sentido.

Veamos.

Tienes la tabla, enella, cada celda tiene como fondo un color lila muy claro con el número del día, sobre ese fondo, se ven vínculos; a estos vínculos les has colocado un efecto mediante el hover y dicho efecto, es que aparezca un fondo y que cambie el color de letra. Esto también funciona.

El cambio de fondo que ocurre en los vínculos, es una imagen como la de la celda en la que están, pero de color más oscuro (azul oscuro), y su posición es relativa a la celda, con lo que a cada vínculo en una lista, le corresponde de fondo tanto en oscuro como en claro el mismo fragmento del recuadro con el número.

Según veo en tu css, esto es exáctamente lo que has programado. Al menos tras una revisión rápida.

Ahora, si lo que querías es que cambiara el fondo de la celda y no el fondo del vínculo, debes aplicar el cambio a la celda y no al vínculo.

Si todo lo que he dicho antes no sirve de mucho, tendrás que explicar el problema nuevamente de forma más clara y posiblemente acompañarlo con algunos ejemplos gráficos.

Felicidad

[pao01]

Si no he entendido mal, y cabe la posibilidad de decir una burrada me parece que lo que no deseas es que en el recuadro de los enlaces (azul) no se vea la silueta de los números del calendario.
Si se trata de esto, creo que el tema va por aquí en este tema que justo leí hoy en el que Kseso? explica algunas cosas respecto a z-index

[PatomaS]

Hola

El temas que mencionas, pao01, está enfocado en las transparencias, no en el z-index. De paso, tiene errores conceptuales.

Posiblemente querrías citar algún otro.

Felicidad

[pao01]

Iniciado por PatomaS

Hola

El temas que mencionas, pao01, está enfocado en las transparencias, no en el z-index. De paso, tiene errores conceptuales.

Posiblemente querrías citar algún otro.

Felicidad

No, de hecho cité ese ejemplo considerando mi interpretación a la consulta de este hilo que aún no termina de quedar clara para muchos.
Pero ya Bonez seguramente ampliará su consulta y veremos en que se puede ayudar.

[PatomaS]

Hola

Ciertamente puede que la solución vaya por el lado de las transparencias, aunque no creo.

Sin embargo, mi respuesta respecto al tema que citas, está basada directamente en tu frase final en la respuesta, donde claramente mencionas el uso de z-index. Por eso parece que querías citar otro tema.

Iniciado por pao01

[...], creo que el tema va por aquí en este tema que justo leí hoy en el que Kseso? explica algunas cosas respecto a z-index

:)

Felicidad

[pao01]

Sin embargo, mi respuesta respecto al tema que citas, está basada directamente en tu frase final en la respuesta, donde claramente mencionas el uso de z-index. Por eso parece que querías citar otro tema.

Patomas, sinceramente no se por qué escribí z-index, aunque mirando el título de este post veo porque lo escribí. Disculpas.

[PatomaS]

Hola

Nada de que preocuparse, empezando por mi, a todos se nos va el dedo en el teclado y el "santo al cielo", como dicen por ahí.

;)

Felicidad

[pzin]

Vaya...

No sé que pasó que nunca más volví a mirar éste hilo.

Lo curioso es que nunca se solucionó, y me volvió a pasar en otros lugares...

Por aclarar ciertos malentendidos... No se trataba de transparencia (pues nunca usé ningún tipo de transparencia) y no habían celdas por ningún lado (celdas de una tabla).

El asunto era bastante simple, sobre algo así:

Código html:

<div>
<span>31</span>
<a href="">abcd</a>
<a href="">abcd</a>
<a href="">abcd</a>
<a href="">abcd</a>
</div>
 

span, no tiene nada de especial.

Los enlaces (A) tiene un margin-top negativo, justamente de la altura de SPAN, y un z-index mayor que SPAN, pero su contenido (en de los enlaces) si actúa correctamente quedando por delante (como indica el z-index).

Ahora, cuando A:hover, simplemente colorea el fondo del enlace.

Hasta ahí todo bien, nada extraño ni raro. Solo pasa que el fondo de A:hover, queda por detrás del contenido de SPAN.

Parece ser que, el fondo de un elemento "movido" encima de otro elemento, aunque éste último elemento tenga un mayor z-index, sigue quedando por detrás, del primer elemento, como si z-index siguiera a cero. (leer negrita solamente para un resumen al aire XD)

Esa es la conclusión que saco yo, y me baso en que no había nada extraño realmente, y me pasó, comoya digo, en otra página al poco tiempo.

Respondo a éste hilo porque como no se solucionó, me da curiosidad. Y ya de paso, gracias a todos por responder.

Nota: si se sigue el enlace del primer mensaje del hilo, no se verá el problema ya que ha cambiado el código.

Edito: acabo de subir un ejemplo aquí: http://www.lanzaroteagenda.com/pseudoliquid.php (es muy simple, pero se ve lo que pasa claramente)

[PatomaS]

Hola

He hecho algunos ajustes y pruebas con tu código, sin variarlo mucho y lo que saco en conclusión hasta ahora son dos cosas.

1. Si los vínculos mantienen su estado de elemento inline, su fondo estará, junto con ellos, en el z-index que les asiges y tanto el texto del vínculo como su fondo, estarán por encima del 31.

2. Los elementos con display block, apilan sus fondos, de manera que el fondo de la capa de los enlaces estará encima de la capa del 31 y a su vez, el texto de dichos elementos de bloque estarán apilados a su vez; es decir, es como barajar un mazo de cartas, cae una de cada lado formando una única pila.

No se si había caido antes en esto, pero es lo que ocurre. No he encontrado documentación al respecto, ya sea porque no hay o porque no he buscado bien; sin embargo, parece como si la implementación de este hecho ocurriera al revés; definitivamente ocurre al revés de como uno espera.

Veremos si encuentro algo más.

En cualquier caso, este es el código que estaba usando para las pruebas, obviamente solo tiene la última versión.

Código:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<title>capas</title>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<style type="text/css">
	#capa_2 {
		font-size: 6em;
		color: red;
		font-weight: bold;
		background: #0f0;
	}
	#capa_3 {
		margin-top: -6em;
		z-index: 100;
		background: #fff;
		width: 200px;
		display: block;
	}
	a { background: inherit; display: list-item; }
	a:hover {
		background-color: #000;
		color: #fff;
		font-weight: bold;
	}
	</style>
</head>
<body>
	<div id="capa_1">
		<div id="capa_2">31</div>
		<div id="capa_3">
			<a href="">abcdefgh</a>
			<a href="">abcdefgh</a>
			<a href="">abcdefgh</a>
			<a href="">abcdefgh</a>
		</div>
	</div>
</body>
</html>

Felicidad

[kseso?]

Hola:
La propiedad "z-index" se aplica a los elementos que están posicionados.
Y supongo (quizás equivocadamente) que como el valor por defecto es "static" y este no admite desplazamientos en el plano de la ventana (top, left, bottom, righ), tampoco lo hará en la "vertical" de ella.
Esa "anomalía" desaparece con añadir la propiedad "position" con valor relative o absolute (fixed es un absolute con extras).
Pero reconozco que no me he parado a investigar/buscar más a fondo como ha hecho PatomaS (un saludo) para comprender más a fondo la cuestión que plantea Bonez, sólo me he limitado a aplicar "position:relative" junto con "z-index". Por eso decía que es sólo una suposición.

Un saludo

P.D.: Quizás también influya en tu página de ejemplo, Bonez, que no tiene Doctype.

[pzin]

PatomaS y kseso? excelente.

Entonces, por resumir, las soluciones son, o bien poner un elemento contenedor de los enlaces en bloque y éstos en linea, o bien, posicionarlos absoluta o relativamente.

Aunque ya no me sirva para éste propósito (finalmente lo cambié un poco) aprendí algo que con lo que no volveré a tener problemas. Y de paso queda para otros que tengan un problema parecido.

Muchas gracias por vuestros esfuerzos.

¡Hasta la próxima!

[kseso?]

Nada Bonez, con algo hay que divertirse

Pero complementando algo más.
La posición z-index como sabemos, es para alterar la posición en el eje z (la vertical) de elementos superpuestos (total o parcialmente). Esa superposición es algo contranatura (recordemos que cada etiqueta tiene su marco contenedor que evita a priori esas situaciones. Por lo que hay que alterar las propiedades "naturales" que le son propias por definición.

Todo el rollo anterior viene a cuento de que en tu ejemplo no necesitarías utilizar z-index, porque el "31" se encuentra antes en el html que los enlaces. Bastaría con modificar la posición en el plano horizontal (desplazar la colocación de uno de ellos) para posicionarse unos sobre el otro. Y volvemos a encontrarnos con lo comentado en mi #14, tenemos que modificar el valor static.

Pero seguro que nuestro amigo PatomaS regresará con una explicación más exacta, completa y acertada. Como es habitual en él .
Tiempo al tiempo.

Un saludo

[PatomaS]

Hola

¡ jo ! yo que iba a escribir un poco de palabras técnicas para que se hiciera esto aburrido y nadie lo leyera, pareciéndo así que ponía algo de verdad ...

Eso no se hace kseso?, ahora tengo que poner algo útil de verdad ¿de dónde lo saco?

;)

Bueno, veremos si me lo cop...digooo, me inspiro en estos días...

Felicidad