es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Problema de orden de apilamiento: Mostrar el elemento encima del primer hijo de los hermanos y debajo del segundo hijo de los hermanos.

Problema de orden de apilamiento: Mostrar el elemento encima del primer hijo de los hermanos y debajo del segundo hijo de los hermanos.

01 Aug, 2023 Programación

Tengo el siguiente código y quiero mostrar el texto del título sobre el div (naranja) del mapa, pero debajo del div (oliva) de superposición. Mis intentos de aplicar el z-index (ver código a continuación) no funcionaron. ¿Qué me falta aquí? (Dejé los transform en el código CSS ya que podrían alterar el orden de apilamiento.)

body,
.root {
position: relative;
margin: 0;
padding: 0;
transition: transform 1s ease;
}

.main {
position: relative;
transition: 1s ease;
transform: translateX(0px);
}

.map {
position: relative;
background-color: orange;
z-index: 1;
}

.overlay {
position: absolute;
width: 95%;
top: 0;
left: 5%;
right: 0;
bottom: 0;
transition: 1s ease;
background-color: olive;
z-index: 100;
}

.title {
position: absolute;
left: 0;
top: 0;
font-weight: bold;
z-index: 10;
}


.

Title Title Title Title

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar la cadena de título sobre el div del mapa, pero debajo del div superpuesto, necesitas ajustar los valores de z-index de las clases map y title. La propiedad z-index solo funciona en elementos posicionados (position: absolute, position: relative, position: fixed o position: sticky).

    En este caso, necesitas cambiar el valor de z-index de la clase .title para que sea más alto que la clase .map pero más bajo que la clase .overlay. Podrías intentar cambiar el z-index de la clase .title a 50 o cualquier valor más alto que la clase .map, pero más bajo que la clase .overlay (que está establecida en 100).

    Por ejemplo:

    .map {
  position: relative;
  background-color: orange;
  z-index: 1;
}

.title {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  z-index: 50;
}

.overlay {
  position: absolute;
  width: 95%;
  top: 0;
  left: 5%;
  right: 0;
  bottom: 0;
  transition: 1s ease;
  background-color: olive;
  z-index: 100;
}

    Además, ten en cuenta que la propiedad transform no afecta al orden de apilamiento, por lo que dejarla en el código CSS no alterará el orden de apilamiento.

    Una vez que establezcas los valores de z-index correctamente, la cadena de título debería aparecer sobre el div del mapa, pero debajo del div superpuesto.

Comments are closed.