May 29
Molti siti Web utilizzano i menu a discesa Stile di mettere un sacco di opzioni di navigazione in una piccola porzione della pagina. Questo codice è spesso complessa e coinvolge l'uso del "z-index" in CSS per fare le parti dello stack di menu in un certo ordine e mantenere la discesa sopra altro contenuto della pagina. A volte si avrà una parte della pagina che non va dietro il menu come dovrebbe. Fissaggio questo comporta assicurandosi che la discesa contiene una vera e propria z-index e dando il contenuto problematico negativo z-index, se necessario.
1 Aprire il foglio di stile che contiene stili per il CSS discesa. A volte gli stili si trovano in un foglio di stile solo per la discesa, soprattutto se si è installato come parte di uno script. Altre volte, gli stili sono nel foglio di stile principale. Scopri quali fogli di stile si hanno guardando la testa del codice HTML:
<Head>
<Title> titolo della pagina </ title>
<Link rel = "stylesheet" href = "styles.css" type = "text / css" />
<Link rel = "stylesheet" href = "dropdown.css" type = "text / css" />
</ Head>
In questo esempio, c'è un file "dropdown.css", che probabilmente contiene codice CSS del menu a discesa. Altri nomi possibili sono "menu" o "suckerfish", quest'ultimo è un nome alternativo per elenchi a discesa.
2 Trova codice CSS del menu a discesa nel foglio di stile. È necessario la regola principale:
Menu {
list-style: none;
padding-left: 0;
}
A volte gli sviluppatori di aggiungere commenti come
"codice a barre / navigazione /" per mettere in chiaro che il codice fa quello. Se non vedere i commenti, aprire il file HTML per la pagina Web e ottenere l'ID o il nome della classe dei "<ul>" tag che compongono il menu.
3 Aggiungere il posizionamento relativo e un z-index per il menu: Menu {
list-style: none;
padding-left: 0;
position: relative;
z-index: 100;
}
La z-index ha bisogno di un valore alto abbastanza in modo che impila la barra dei menu sopra tutti gli altri contenuti pagina. Il valore può essere alto come "9999" di posizionamento è necessario per una z-index per lavorare, ma una posizione relativa non sposterà la barra da qualche altra parte nella pagina.
4 Testare la pagina in un browser. Se il problema persiste, fare clic destro sul codice del browser e visualizza sorgente. Trova i tag che contengono il contenuto problematico:
<Div id = "some_content">
Contenuto che deve spingere verso il basso ...
</ Div>
Ottenere il nome ID dal tag del contenuto, come ad esempio "some_content" nell'esempio precedente.
5 Torna al foglio di stile e aggiungere questo al fondo:
some_content {
position: relative;
z-index: -10;
}
Un negativo z-index spingerà il contenuto al di sotto di qualsiasi altro contenuto che ha un valore di z-index positivo. Con la barra menu contenente un valore elevato e la zona problema essendo z indicizzati con valore negativo, l'area problema dovrebbe andare dietro il menu.