html - saber - ¿Cómo hacer que un elemento secundario se muestre detrás(índice z más bajo) que su elemento primario?

medir 1 70

Question

Necesito que un determinado elemento dinámico aparezca siempre encima de otro elemento, sin importar el orden en el árbol DOM. es posible? He probado z-index (con position: relative ), y parece que no funciona.

Necesito:

<div class="a">
    <div class="b"></div>
</div>

<div class="b">
    <div class="a"></div>
</div>

Para mostrar exactamente lo mismo cuando se procesa. Y por razones de flexibilidad (estoy planeando distribuir un complemento que necesita esta funcionalidad), realmente me gustaría no tener que recurrir a un posicionamiento absoluto o fijo.

Para lo que vale la pena, para realizar la función que estaba deseando, hice una declaración condicional donde el elemento secundario superpuesto se volvería transparente en el caso de que estuviera bloqueando la vista de su elemento primario. No es perfecto, pero es algo.

Answer 1

Descubrí una manera de poner realmente el elemento secundario detrás de su elemento creando un pseudo-elemento que imita al padre. Útil para cosas como menús desplegables - ¡Espero que ayude, usuario de hace ocho años!

https://jsfiddle.net/x7up68s2/7/

.container > div {

  // will be beyond its child
  background-color: red;
  width: 150px;
  height: 50px;
  z-index: 10;

  // will be above its "child"
  &:before {
    content: '''';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: red;
    z-index: 7;
    top: 10px;
  }
}

.a > .b,
.b > .a {
  z-index: 5;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: teal;
}

Answer 2

He tenido éxito usando lo siguiente.

índice z: -1;

Answer 3

Lo que necesita es una position: absolute para que el índice z funcione.

También deberá configurar las propiedades css left y top para colocar el elemento en el lugar correcto. Probablemente tendrás que hacer esto con javascript.

Answer 4

Si los elementos forman una jerarquía, no se puede hacer de esa manera, porque cada elemento posicionado crea un nuevo contexto de apilamiento , y el índice z es relativo a los elementos del mismo contexto de apilamiento.