2010-10-16 14 views
7

voglio che il mio div visualizzi in cima a ogni cosa che ho messo al 100% per larghezza e altezza e mostra sopra un sacco di contorl tranne alcuni hanno css z-index e altre cose i provare a mettere il mio div z-index numero grande, ma non ha funzionatocome rendere div in cima a tutti gli altri controlli

{ 
    width: 100%; 
    height: 100%; 
    top: 5px; 
    left: 0px; 
    background-color: #FFFFFF !important; 
    padding: 10px; 
    overflow: hidden; 
    visibility: visible; 
    display: block; 
    z-index: 500 !important; 
    position: relative; 
} 

risposta

17

Dal momento che si vuole coprire l'intero schermo, vi consiglio questo:

#overlayDiv { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index:99; 
} 

Nota, non c'è bisogno di impostare le proprietà di visualizzazione e di visibilità. Inoltre, non impostare padding o margine su questo elemento! Se vuoi che abbia un padding, imposta un margine sul suo child/children.

Inoltre, assicurarsi che il DIV in questione sia figlio diretto dell'elemento BODY.

+0

Questo ha funzionato per me ma, c'è qualche opzione per renderlo fisso? –

+0

@PiniCheyni C'è un problema con 'fixed'? –

+0

nel mio caso non volevo farlo riparare, ho una pagina dinamica che aggiunge elementi in cima a questo div, invece spingendo questo div down fa sì che questo div rimanga fisso in questa posizione –

0

al fine di estrarre un elemento HTML fuori del flusso naturale di come gli elementi sono spiegate sullo schermo è necessario utilizzare position: absolute . Ciò consentirà all'elemento di diventare uno strato sopra gli altri elementi (assumendo che il valore di z-index sia maggiore di tutti gli altri).

In questo momento il tuo elemento sembra avere posizione: relativo.

+0

provo posizione: assoluto stesso problema – new

0

Probabilmente il problema è relativo a position:relative. Impostare invece su assoluto, e se è necessario per compensare l'elemento, utilizzare margin anziché top/left.

0

Potrebbe essere, che il problema esiste solo con selects e in IE6? Se è così, guarda il answers here.

Problemi correlati