2013-05-08 7 views
10

Ho un esempio abbastanza semplice qui, sto avendo un'intestazione fissa con altri elementi che vengono impilati uno dopo l'altro, il singolo elemento viene trasformato usando transform: rotate(360deg).Gli elementi trasformati CSS hanno z-index predefinito?

Quindi, solo l'elemento trasformato sta passando sopra alla barra fissa quando la pagina scorre, dove altri elementi non lo fanno. Quindi la domanda è: gli elementi trasformati hanno il valore predefinito z-index?

Quando si utilizza z-index: -1; per .transform_me si comporta normale

Demo

CSS

.fixed { 
    height: 30px; 
    background: #f00; 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 

.transform_me { 
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
} 

span { 
    display: block; 
    height: 100px; 
} 

Nota: sarà risolto se usiamo dire z-index: 999; per il fisso div, b Non è quello che sto cercando.

+0

Qualsiasi valore positivo per 'z-index' compreso ** 1 ** lo risolverà, ma come hai detto sembra che ottenga il proprio livello, ma è inferiore a' z-index: 1'? +1 –

+0

@JEES Non lo so, questo è divertente, voglio dire se ho numerosi elementi trasformati, devo cambiare 'z-index' per ognuno, voglio sapere perché questo succede –

+0

Sarebbe un grande casino, in [Questo collegamento] (http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms) dall'opera dice - * Nota che una trasformazione non influisce sul flusso del documento, quindi se l'elemento viene spostato dove un altro elemento è già posizionato, si sovrapporrà a quell'elemento piuttosto che al contenuto che scorre intorno o sotto di esso. Gli elementi più avanti nel documento non prenderanno nemmeno lo spazio lasciato dall'elemento trasformato * - –

risposta

7

Per elementi la cui disposizione è governato dal box model, un valore diverso da none per i transform risultati in la creazione di un contesto sia impilamento ed un blocco contenente. L'oggetto agisce come un blocco contenitore per i discendenti posizionati fissi.

dallo specification.

Stacking context.

+1

Dovrei usare 'z-index: -1;' per tutti gli elementi trasformati? –

+0

Darei semplicemente ".fixed" a un positivo "z-index". – Ana

+0

Ora il CSS sta diventando sempre più sporco, comunque grazie .. –

Problemi correlati