2012-05-08 8 views
14

Ho un problema e non riesco a capire come correggere questo. Quello che voglio è che la "casella rossa" rimanga in cima alla pagina in uno z-index 2, mentre tutto il contenuto sullo sfondo rimane sull'indice 1 ma in qualche modo questo codice sta "comprimendo" i livelli. Se qualcuno può aiutarmi, lo apprezzo davvero. Mi scusi per il mio inglese. Grazie in anticipo.Come "z-index" per creare un menu sempre in cima al contenuto

<html> 
<head> 
<title></title> 
<style type="text/css"> 

body { margin: 0; } 

#container { 
    position: absolute; 
    float: right; 
    z-index: 1; 

} 

.left1 { 
    background-color: blue; 
    height: 50px; 
    width: 100%; 

} 
.left2 { 
    background-color: green; 
    height: 50px; 
    width: 100%; 

} 


#right { 
    background-color: red; 
    height: 300px; 
    width: 300px; 
    float:right; 
    z-index: 999999; 
    margin-top: 0px; 
    position: relative; 
} 




</style> 
</head> 

<body> 

<div id="container"></div> 
<div class="left1">LEFT BLUE</div> 
<div class="left2">LEFT GREEN</div> 
</div> 
<div id="right">RIGHT RED</div> 

</body> 
</html> 
+0

Penso che avrai bisogno di condividere alcuni html per aiutarci ad aiutarti ... probabilmente non hai bisogno di z-index per farlo. puoi usare il posizionamento relativo e assoluto ... e guardando al tuo esempio css, temo che forse non capisci bene come usare correttamente il posizionamento relativo e assoluto. Non che io ne sappia molto;) – rafaelbiten

+1

Ha funzionato! Perfezionare. Ci ho già provato, ma non lo cambio in "assoluto". Grazie mille! – rmz

+0

extra end tag di div nel tuo codice HTML – adedoy

risposta

11

Probabilmente non hai bisogno di z-index per farlo. È possibile utilizzare il posizionamento relativo e assoluto.

Ti consiglio di dare un'occhiata al posizionamento css e alla differenza tra posizionamento relativo e assoluto ... Ho visto che stai impostando la posizione: assoluta; a un elemento e cercando di far galleggiare quell'elemento. Non funzionerà amico! Quando capisci il posizionamento in CSS, renderà il tuo lavoro molto più semplice! ;)

+0

Sì, hai assolutamente ragione. Grazie per il consiglio. Im ancora molto pasticcio con il posizionamento ... grazie ancora! – rmz

+4

Fammi sapere se hai bisogno di aiuto! Ricorda che gli elementi posizionati "assoluti" saranno sempre "relativi" al suo elemento genitore che è stato impostato su "posizione: relativo". Se lo capisci, ti aiuterà con elementi posizionati in modo assoluto. Buona fortuna con il vostro progetto! – rafaelbiten

+0

Grazie mille :) – rmz

2
#right { 
    background-color: red; 
    height: 300px; 
    width: 300px; 
    z-index: 9999; 
    margin-top: 0px; 
    position: absolute; 
    top:0; 
    right:0; 
} 

posizione: assoluto; top: 0; a destra: 0; fai il lavoro qui! :) Rimuovere anche il galleggiante!

2

Ok, suppongo che tu voglia inserire il file .left all'interno del contenitore, quindi ti consiglio di modificare il tuo html. La chiave è la position:absolute e right:0

#right { 
    background-color: red; 
    height: 300px; 
    width: 300px; 
    z-index: 999999; 
    margin-top: 0px; 
    position: absolute; 
    right:0; 
} 

ecco il codice completo: http://jsfiddle.net/T9FJL/

4

si potrebbe mettere lo stile del menu div contenitore con:

<div style="position:relative; z-index:10"> 
    ... 
    <!--html menu--> 
    ... 
</div> 

prima enter image description here

dopo

enter image description here

+0

non funziona con me. – huykon225