HTML: ottieni un elemento figlio da mostrare dietro (indice z inferiore) rispetto al suo genitore?

Question

Ho bisogno che un determinato elemento dinamico appaia sempre sopra un altro elemento, indipendentemente dall'ordine in cui si trovano nell'albero DOM. È possibile? Ho provato z-index (con position: relative) e non sembra funzionare. Odio essere vago, ma questo è il modo più semplice in cui posso pensare di porre questa domanda senza spiegare il suo scopo, fino alla nausea.

Quindi, per ricapitolare, ho bisogno:

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

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

Per visualizzare esattamente la stessa cosa quando reso. E per motivi di flessibilità (sto pensando di distribuire un plug-in che ha bisogno di questa funzionalità), mi piacerebbe davvero non dover ricorrere al posizionamento assoluto o fisso.

Addendum: Per quel che vale, per svolgere la funzione mi mancava, mi ha fatto una dichiarazione condizionale in cui l'elemento figlio sovrapposizione sarebbe diventato trasparente nel caso si stava bloccando la vista del suo genitore. Non è perfetto, ma è qualcosa.

Answer 1

Se gli elementi fanno una gerarchia, esso non può essere fatto in questo modo, perché ogni elemento posizionato crea nuovo stacking context e indice z è relativo agli elementi dello stesso contesto di stratificazione.

Answer 2

quello che ti serve è position: absolute in modo che z-index funzioni.

inoltre sarà necessario impostare le proprietà left e top per posizionare l'elemento nella posizione corretta. Probabilmente avrai bisogno di farlo con javascript.

Answer 3

Ho avuto successo utilizzando quanto segue.

z-index: -1;

Answer 4

Ho trovato un modo per mettere effettivamente l'elemento figlio dietro il suo elemento creando uno pseudo-elemento che imita il genitore. Utile per cose come menu a discesa - spero che aiuti, utente di otto anni fa!

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; 
}