Chrome: impossibile posizionare un div assoluto su un altro quando il genitore è fisso

Question

Ho scoperto che non posso posizionare un div in posizione assoluta su un altro in Chrome quando il genitore del div voglio essere in cima è fisso:

<div id="parent"> 
    <div id="top"></div> 
</div> 
<div id="bottom"></div> 

Ecco un JSFiddle dimostrando il problema:

http://jsfiddle.net/SEJhg/

si dovrebbe vedere che in Chrome giallo div posizionato in modo assoluto con z-index 10 appare dietro il green div posizionato in modo assoluto con z -indice: 1, perché uso della posizione fissa del genitore.

Altri browser come Firefox mostrano il div giallo in cima a quello verde.

Qualche suggerimento su come risolvere questo problema in Chrome? Non sono in grado di modificare la posizione fissa del genitore.

Grazie!

Answer 1

Quello che stiamo vivendo è un relativamente nuovo comportamento in Chrome, introdotto per allineare il comportamento del browser desktop con i browser mobili.

Quando un elemento ha position: fixed; come il vostro #parent, un nuovo contesto di stratificazione viene creato per quell'elemento, il che significa che l'elemento e dei suoi figli è accatastato relativamente a vicenda invece di relativamente al contesto finestra. Pertanto, un elemento che non è figlio dell'elemento fisso (#bottom) non può essere inserito "tra" #parent e #top.

La soluzione sarebbe quella di spostare l'#bottom all'interno #parent (mettendolo nello stesso contesto di stratificazione), o cambiando il metodo di posizionamento #parent a qualcosa di diverso fisso.

La proposta di questo cambiamento in Chrome può essere trovato qui: http://lists.w3.org/Archives/Public/www-style/2012May/0473.html

Answer 2

posizione CIl solo per Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
#parent { 
    position: absolute; 
    } 
} 

Vedi http://jsfiddle.net/5fKq6/ in tutti i browser.

Answer 3

Ho trastullato con questo e la conclusione a cui sono giunto è che in chrome gli elementi parent e top sono inseparabili. Quello che ho cercato di arrivare a questa conclusione è stato mettere l'elemento bottom sopra il "sandwich" parent e giocherellare con gli z-index. Posso far apparire bottom sopra o sotto il sandwich, ma non direttamente in esso.

cosa ha funzionato per me è stato questo:

<div id="parent"> 
    <div id="bottom"></div> 
    <div id="top"></div> 
</div> 

Non conosco il contesto della pagina quindi questo potrebbe essere una risposta inutile per voi, ma credo che facendo questo e quindi regolando il posizionamento di ottenere il risultato desiderato sugli assi xey della pagina sarà più facile che cercare di far scivolare l'elemento nel sandwich dall'esterno come speravi.

Answer 4

provare questo codice:

<div id="parent"> 
<div id="bottom"></div> 

</div>

<div id="top"></div> 

Answer 5

Sto usando la versione Chrome: 21.0.1180.89 m e il giallo è posizionato sopra il verde.