css problema z-index con elementi nidificati
css3 (2)
Non specificare alcun
z-index
.bank
per evitare di creare un nuovo
contesto di sovrapposizione
e semplicemente regolare l'
z-index
degli altri elementi.
Questo funzionerà perché tutti e 3 gli elementi appartengono allo stesso contesto di impilamento, quindi puoi specificare qualsiasi ordine desideri.
.bank {
position:relative;
background: red;
width: 500px;
height: 200px;
}
.card {
position: absolute;
top:0;
z-index: 2;
height: 100px;
width: 400px;
background: blue;
}
.button {
position: absolute;
top: 0;
z-index: 1;
height: 150px;
width: 450px;
background: yellow;
}
.container {
position: relative;
}
<div class="container">
<div class="bank">
<div class="card"></div>
</div>
<div class="button"></div>
</div>
AGGIORNARE
Considerando il tuo codice, l'unico modo è rimuovere
z-index
e
transform
da
.bank
altrimenti sarà impossibile perché i tuoi elementi non apparterranno mai allo stesso contesto di stacking.
Come puoi leggere nel link precedente:
Ogni contesto di impilamento è autonomo : dopo che il contenuto dell'elemento viene impilato, l'intero elemento viene considerato nell'ordine di impilamento del contesto di impilamento padre.
Ho 3 elementi HTML che voglio ordinare sul piano z:
.bank {
width: 200px;
height: 200px;
background-color: grey;
position: absolute;
z-index: 100;
transform: translateY(10%);
}
.card {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
z-index: 300;
}
.button {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
left: 30px;
top: 50px;
z-index: 200;
}
<div class="bank">
bank
<div class="card">card</div>
</div>
<div class="button">button</div>
Voglio che il pulsante sia in cima alla banca ma dietro la carta . Ma il pulsante è sempre in cima sia alla banca che alla carta, qualunque cosa io provi.
Modifica: ho notato che la rimozione di z-index e la trasformazione da '.bank' lo risolve, ma ho bisogno della proprietà di trasformazione. Cosa posso fare?
Cosa potrebbe causare il mancato funzionamento? Grazie
Puoi farlo aggiungendo z-index solo alla classe della carta e posizionando gli elementi in assoluto.
.bank {
width: 150px;
background: red;
height: 150px;
position: absolute;
top: 0;
left: 0;
}
.card {
width: 50px;
background: black;
height: 50px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.button {
width: 100px;
background: blue;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
<div class="bank">
<div class="card"></div>
</div>
<div class="button"></div>