Hvordan lage en blokk av HTML Tekst vises foran annen

Hvordan lage en blokk av HTML Tekst vises foran annen


Cascading Style Sheet kode gjør det mulig å plassere HTML-elementer på en webside. Når du setter den "posisjonen" eiendom for et element, kan du flytte elementet til toppen eller bunnen og venstre eller høyre. Det finnes også en stablingsrekkefølgen eiendom - z-index - for posisjonerte elementer. For å flytte en blokk med HTML-teksten over en annen, for eksempel, må du gi hver blokk en stilling type og z-index.

Bruksanvisning

1 Åpne opp HTML-filen i en kode editor eller opprette en ny en, og plassere to blokker med tekst. Du trenger et sett med tags innpakning rundt hver tekstblokk. De fleste kodene fungerer, men <span> og <li> trenger en ekstra CSS-koden senere, slik at de vises som blokker. Sørg for at begge dine tekstblokker er ved siden av hverandre. Legg til en ny linje over den første blokken og legge til en <div> tag. Lukk ut <div> ved å legge </ div> under den andre tekstblokk. Gi <div> en "ID" attributt. Gi tags innpakning rundt hver tekst blokkere en "ID" attributt i tillegg. De to blokkene kan se slik ut:

<Div id = "text-wrapper">

<Div id = "første"> Her er noen eksempler på tekst. </ Div>

<Div id = "andre"> Her er noen flere eksempler på tekst. </ Div>

</ Div>

2 Åpne din CSS fil eller finn <style> og </ style> -kodene i HTML-filen. Hvis du ikke bruker en ekstern CSS-fil og det er ingen <style> tags, legge dem mellom <head> og </ head> i HTML-filen. I CSS-kode, angir posisjonen til innpakning <div> element til "slektning" slik:

tekst-wrapper {position: relative;}

3 Legg absolutt posisjonering for begge tekstblokkelementer. Når du angi posisjonen til absolutt, kan du angi hvor mange piksler til toppen eller bunnen og til venstre eller høyre. Siden du setter innpakning <div> for å bruke relative posisjonering, dine absolutte posisjoner er bare absolutt innenfor den relativt posisjonert plass for at <div>.

først {position: absolute; top: 0px; venstre: 0px;} andre {position: absolute; top: 5px; venstre: 5px;}

I eksempelet ovenfor, vil den første tekstblokk peak ut bak den andre blokken med fem piksler på toppen og fem piksler til venstre.

4 Gi hver tekstblokk en z-indeksverdi for å fortelle nettlesere for å vise en over den andre. Den laveste verdien for en z-indeks er null, mens den høyeste er 9999 (inkluderer ikke komma). Ikke legg til "px" eller "em" til z-index som det ikke tar en måleenhet.

først {position: absolute; top: 0px; venstre: 0px; z-index: 1;} andre {position: absolute; top: 5px; venstre: 0px; z-index: 0;}

Denne koden vil plassere den andre tekstblokk under den første, og deretter første tekstblokken vil være fem piksler over andre og fem piksler til høyre.

Hint

  • Bruk: hover pseudo-velgeren til å endre et element z-index. Dette vil gjøre det mulig å gjøre et element raise fremfor en annen når brukeren beveger musa over en del av nettsiden. The: hover pseudo-velgeren fungerer i alle nettlesere bortsett fra Internet Explorer 6, som bare tillater bruk på <a> koder.