Hvordan lage en Div gå bak en CSS Drop-Down
Mange nettsteder bruker rullegardinmenyer til å plassere mange navigasjonsalternativer i en liten del av siden. Denne koden er ofte komplekse og involverer bruk av "z-index" eiendom i CSS for å gjøre deler av menyen stabelen i en bestemt rekkefølge og holde rullegardin ovenfor andre sideinnhold. Noen ganger vil du ha en del av siden som ikke går bak menyen som det skal. Fikse dette innebærer å sørge for rullegardin inneholder en skikkelig z-indeks og gi det problematiske innholdet en negativ z-index om nødvendig.
Bruksanvisning
1 Åpne stilark som inneholder stiler for CSS rullegardinmenyen. Noen ganger stilene er plassert i et stilark bare for drop-down, spesielt hvis du har installert det som en del av et skript. Andre ganger, stilene er i hoved stilark. Finn ut hvilken stil ark du har ved å se på hodet på HTML:
<Head>
<Title> tittelen på siden din </ title>
<Link rel = "stylesheet" href = "styles.css" type = "text / css" />
<Link rel = "stylesheet" href = "dropdown.css" type = "text / css" />
</ Head>
I dette eksempelet er det en "dropdown.css" fil som sannsynligvis inneholder rullegardin CSS-kode. Andre mulige navn inkluderer "meny" eller "suckerfish", sistnevnte er et alternativt navn for drop-downs.
2 Finn rullegardin CSS-kode i stilarket. Du må hovedregelen:
menyen {
list-style: none;
padding-left: 0;
}
Noen ganger utviklere legge til kommentarer som "/
navigasjon strekkode /" for å gjøre det klart hvilken kode som gjør hva. Hvis du ikke ser kommentarene, åpne HTML-filen for din webside og få ID eller klasse navn av "<ul>" koder som gjør menyen.
3 Legg relative posisjonering og en z-index til menyen: menyen {
list-style: none;
padding-left: 0;
position: relative;
z-index: 100;
}
Den z-index trenger en høy nok verdi, slik at det stabler menylinjen fremfor alt annet sideinnhold. Verdien kan være så høyt som "9999" Posisjonering er nødvendig for en z-indeks for å jobbe, men en relativ posisjon vil ikke flytte bar et annet sted på siden.
4 Test siden i en nettleser. Hvis problemet vedvarer, høyreklikker du på nettleseren og vise kildekoden. Finn de koder som inneholder det problematiske innholdet:
<Div id = "some_content">
Innhold som trenger å trykke ned ...
</ Div>
Få navnet ID fra innholdets koder, for eksempel "some_content" i forrige eksempel.
5 Gå tilbake til stilarket og legge dette til bunns:
some_content {
position: relative;
z-index: -10;
}
En negativ z-indeksen vil skyve innholdet under annet innhold som har en positiv z-indeksverdi. Med menylinjen inneholder en høy verdi, og problemet området blir z-indeksert med en negativ verdi, bør problemet området gå bak menyen.