9
Non sono riusciti a impilare div durante la creazione di un layout di una casella flessibile. O si spingono l'un l'altro all'interno del contenitore div, o devo usare "position:absolute" sulla sovrapposizione che ottiene il div out dal suo contesto contenitore.Scatole CSS 3 impilabili Z-stack: come sovrapporre i DIV che sono elementi della flexbox?
Gli z-indici sembrano non funzionare affatto.
Sto usando Chrome versione più recente e mi aspettavo questo comportamento: http://dev.w3.org/csswg/css-flexbox/#painting
Ecco un plunker con un layout FlexBox base: http://plnkr.co/edit/o2BAwvg3XV4YjwAwwmYR?p=preview illustrare.
È necessario commentare/rimuovere il posizionamento nella definizione della classe .overlay che si trova nel css.
In Firefox 23, sembra funzionare come previsto per me. Senza 'position: absolute', il div overlay prende la maggior parte di' .bodybox' tranne il suo testo, perché viene dopo il testo. Con il posizionamento, si trova nel contesto di stacking di root (poiché '.bodybox' non ha 'z-index') e sovrappone tutti i div non posizionati, ma può essere sovrapposto dall'intestazione o dal piè di pagina se ottengono' z-index: 100' o più. –
Sì, il fatto che il testo sia un oggetto flex anonimo è effettivamente fastidioso. Altrimenti, potrei semplicemente usare il div overlay come figlio dell'elemento flex di testo. Qualcosa del genere. Ciò risolverebbe il problema in Chrome. Immagino che dovrò aspettare fino a quando i comportamenti non saranno armonizzati tra i diversi fornitori di browser. – Taye
Perché pensi che la sovrapposizione non posizionata diventi un oggetto flessibile? Le mie osservazioni mostrano che si tratta di una normale scatola a blocchi nell'elemento flessibile, che ne eredita la larghezza e l'altezza da ".bodybox": http://plnkr.co/edit/29zPsZ?p=preview –