Mostra elemento figlio sopra l'elemento padre utilizzando i CSS

Question

Ho due div, uno annidato all'interno dell'altro. L'elemento genitore ha una larghezza/altezza definita. Come posso mostrare il div figlio al di sopra del genitore (al di fuori di esso) usando solo i CSS?

MODIFICA: Spiacente, forse dovrei chiarire che intendo "sopra" come lungo l'asse z. E sì, ho già provato z-index. Il mio problema è che quando l'elemento figlio è più grande del genitore, si ottiene un effetto "frame" o "window", tagliando parte del div.

Answer 1

Set overflow: visible; sul genitore div.

#parent { 
    overflow: visible; 
} 

Modificato per riflettere l'aggiornamento del richiedente.

Answer 2

Se sei sicuro che hai bisogno di fare questo, allora provate a mettere

margin-top: -100px; sull'elemento figlio o comunque molti px sono necessari per farlo apparire sopra.

Answer 3

È possibile utilizzare la definizione della posizione per posizionarla in modo relativo o assoluto sulla pagina. IE:

Per mostrarlo direttamente sopra, sostituire 100px in questa istruzione con la dimensione della casella secondaria.

 
.child{ 
    position: relative; 
    top: -100px; 
} 

Answer 4

fare in questo modo:

.child { 
position: absolute; 
margin: -100px; 
} 

Utilizzando position: absolute permetterà di eliminare il vuoto lasciato dal bambino quando viene spostata verso l'alto.

Modifica - dopo aver letto l'aggiornamento: posizione: assoluto vale anche per questa situazione. Ottiene il bambino dal genitore. Quindi usi i margini per posizionarlo come vuoi.

In questo modo puoi rendere il bambino più grande del genitore e sopra di esso.

.parent{ 
height: 50px; 
width: 50px; 
} 
.child { 
position: absolute; 
height: 100px; 
width: 100px; 
margin: -75px 0 0 -75px; 
} 

Answer 5

Simile a quello che ha detto Chacha, si dovrebbe dare al genitore una posizione di parente e al bambino una posizione di assoluto, quindi dare al bambino in alto: -100px.

Il genitore ha overflow impostato su nascosto? Ciò potrebbe ostacolare i tuoi sforzi.

Answer 6

È possibile impostare un margine negativo per l'elemento padre, sfalsato dal riempimento, ad esempio margin-left: -100px; padding-left 100px. Questo ti darà 100 px a sinistra dove il bambino può sovrapporsi e stare ancora in cima.