Hvordan man laver en blok af HTML Text vises foran en anden

June 30

Hvordan man laver en blok af HTML Text vises foran en anden


Cascading Style Sheet kode gør det muligt at placere HTML-elementer på en webside. Når du indstiller "position" ejendom for et element, kan du flytte elementet til toppen eller bunden og venstre eller højre. Der findes også en stakrækkefølgen ejendom - z-index - for placerede poster. Hvis du vil flytte en blok af HTML tekst over en anden, for eksempel, skal du give hver blok en position type og z-index.

Instruktioner

1 Åbn din HTML-fil i en kode editor eller oprette en ny og placere dine to tekstblokke. Du har brug for et sæt af tags indpakning omkring hver blok af tekst. De fleste tags arbejde, men <span> og <li> har brug for en ekstra CSS kode senere, så de vil vises som blokke. Sørg begge dine tekstblokke støder op til hinanden. Tilføj en ny linje over den første blok og tilføje en <div> tag. Luk ud <div> ved at tilføje </ div> under den anden tekstblok. Giv <div> et "ID" attribut. Giv tags indpakning omkring hver tekst blokere et "ID" attribut så godt. Dine to blokke kunne se sådan ud:

<Div id = "text-wrapper">

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

<Div id = "anden"> Her er nogle flere eksempler på tekst. </ Div>

</ Div>

2 Åbn din CSS-fil eller finde den <style> og </ style> tags i din HTML-fil. Hvis du ikke bruger en ekstern CSS-fil og der er ingen <style> tags, tilføje dem mellem <head> og </ head> i din HTML-fil. I CSS kode, sæt position indpakningen <div> element til "relative" som så:

tekst-wrapper {position: relative;}

3 Tilføj absolut positionering for begge dine tekstblok elementer. Når du indstiller stilling til absolut, kan du angive, hvor mange pixels til toppen eller bunden og til venstre eller højre. Da du indstiller indpakning <div> til at bruge relativ positionering, dine absolutte positioner er kun absolut inden for det relativt beliggenhed rum af denne <div>.

første {position: absolut; top: 0px; venstre: 0px;} sekunder {position: absolut; top: 5px; venstre: 5px;}

I ovenstående eksempel vil den første tekstblok toppe ud bag den anden blok af fem pixels på toppen og fem pixel i venstre side.

4 Giv hver tekstblok en z-indeksværdi at fortælle browsere til at vise den ene over den anden. Den laveste værdi for en z-indeks er nul, mens den højeste er 9999 (omfatter ikke et komma). Tilføj ikke "px" eller "em" til z-indeks, da det ikke tager en måleenhed.

første {position: absolut; top: 0px; venstre: 0px; z-index: 1;} sekunder {position: absolut; top: 5px; venstre: 0px; z-index: 0;}

Denne kode vil placere den anden tekstblok under den første, og derefter den første tekstblok vil være fem pixels over den anden og fem pixels til højre.

TIPS

  • Brug: hover pseudo-vælgeren til at ændre et element s z-index. Dette vil gøre det muligt at lave et element raise over en anden, når brugeren mus over en del af websiden. Den: hover pseudo-selector værker i alle browsere undtagen Internet Explorer 6, som kun tillader dets anvendelse på <a> tags.

relaterede artikler