CSS position

CSS position (Positioning) egenskab giver dig mulighed for at positionere elementer.

CSS position og flydende layout

CSS tilbyder nogle egenskaber til position og flydende layout, ved hjælp af hvilke man kan oprette kolonelayout, overlappe dele af layoutet med hinanden og endda fuldføre opgaver, som tidligere normalt krævede flere tabeller, i mange år.

Den grundlæggende idé bag position er meget simpel, den giver dig mulighed for at definere, hvor elementets ramme skal vises i forhold til sin normale placering, eller i forhold til forældrelementet, et andet element eller endda browserens vindue. Det er klart, at denne funktion er meget kraftfuld og også meget overraskende. At vide, at brugeragentens støtte til position i CSS2 er langt overlegent sammenlignet med støtte til andre aspekter, bør ikke være overraskende.

På den anden side introducerede CSS1 for første gang flydende layout, baseret på en funktion, som Netscape tilføjede i de tidlige år af Web-udviklingen. Flydende layout er ikke fuldstændig en position, men det er selvfølgelig heller ikke en normal strømlayout. Vi vil afklare betydningen af flydende layout i de efterfølgende kapitler.

Alt er boks

div, h1 eller p elementer kaldes ofte blokk elementer. Dette betyder, at disse elementer vises somEt stykke indhold, som “blok boks”. Til sammenligning kaldes elementer som span og strong “inline elementer”, fordi deres indhold vises i en linje, altså “linjeboks”.

Du kan bruge display-attributtenÆndre typen af genererede bokse. Dette betyder, at ved at sætte display-attributten til block, kan inline-elementer (f.eks. <a>-elementer) opføre sig som blokk elementer. Det er også muligt at sætte display til none, så den genererede boks og alt indhold ikke vises og ikke optager plads i dokumentet.

Men i et tilfælde oprettes der blokk elementer, selv uden eksplicit definition. Dette sker, når nogle tekster tilføjes til begyndelsen af en blokk element (f.eks. div). Selvom disse tekster ikke defineres som en paragraf, behandles de som en paragraf:

<div>
nogle tekst
<p>Mere tekst.</p>
</div>

I dette tilfælde kaldes denne boks anonym blok, fordi den ikke er forbundet med specifikt definerede elementer.

Tekstlinjer for blokk elementer oplever også noget lignende. Antag, at der er en paragraf med tre linjer af tekst. Hver tekstlinje danner en无名框. Det er ikke muligt at anvende stil på anonyme blokke eller linjebokser, fordi der ikke er noget sted at anvende stil (bemærk, at linjeboks og inline-boks er to forskellige begreber). Dette hjælper dog med at forstå, at alt, hvad man ser på skærmen, dannes af en vis boks.

CSS positioneringsmekanismer

CSS har tre grundlæggende positioneringsmekanismer: den almindelige strøm, flydende og absolut positionering.

Medmindre specifikt angivet, er alle bokse placeret i den almindelige strøm. Det vil sige, at positionen af elementer i den almindelige strøm bestemmes af deres placering i (X)HTML.

Blokk bokse rækker op ad en ad fra top til bund, og den vertikale afstand mellem bokse beregnes ud fra deres vertikale marginer.

Inline-bokser placeres vandret på en linje. Man kan bruge vandret indre margin, kant og margin til at justere deres afstand. Men vertikal indre margin, kant og margin påvirker ikke højden på linjebokserne. Den vandrette boks dannet af en linje kaldesLinjeboks (Line Box)Linjeboksens højde er altid tilstrækkelig til at indeholde alle de linjebokser, den indeholder. Dog kan indstilling af linjehøjde øge højden på denne boks.

I de følgende kapitler vil vi give dig en detaljeret forklaring af relativ positionering, absolut positionering og flydende positionering.

CSS position Egenskab

Ved at bruge position-attributtenVi kan vælge 4 forskellige typer af positionering, hvilket påvirker måden elementbokserne genereres på.

Betydningen af position-attributten:

static
Elementbokser genereres normalt. BlokkElementType genererer en rektangulær boks som en del af dokumentstrømmen, mens inline-elementer vil skabe en eller flere linjebokser, der placeres i deres forældre element.
relative
Elementboksen flyttes en bestemt afstand. Elementet bevarer sin oprindelige form, og det plads, det oprindeligt tog op, bevares.
absolut
Elementboksen fjernes fuldstændigt fra dokumentstrømmen og placeres relativt til dens indeholder. Indeholderen kan være en anden element i dokumentet eller den oprindelige indeholder. Det plads, elementet oprindeligt tog op i den normale dokumentstrøm, lukkes, som om elementet oprindeligt ikke eksisterede. Efter placeringen genereres en blokkframe, uanset hvilken type frame den oprindeligt genererede i den normale strøm.
fast
Elementboksen opfører sig som om position er sat til absolute, dog er dens indeholder vinduet selv.

Tip:Relativ placering betragtes faktisk som en del af den almindelige strømplacering, fordi elementets placering er relativ til dens placering i den almindelige strøm.

Eksempel

Placering: Relativ placering
Dette eksempel viser, hvordan man kan placere et element relativt til dens normale placering.
Placering: Absolut placering
Dette eksempel viser, hvordan man bruger absolutte værdier til at placere et element.
Placering: Fast placering
Dette eksempel viser, hvordan man kan placere et element relativt til browserens vindue.
Brug af faste værdier til at indstille toppen af et billede
Dette eksempel viser, hvordan man bruger faste værdier til at indstille toppen af et billede.
Brug af procenter til at indstille toppen af et billede
Dette eksempel viser, hvordan man bruger procenter til at indstille toppen af et billede.
Brug af pixelværdier til at indstille bundkanten af et billede
Dette eksempel viser, hvordan man bruger pixelværdier til at indstille bundkanten af et billede.
Brug af procenter til at indstille bundkanten af et billede
Dette eksempel viser, hvordan man bruger procenter til at indstille bundkanten af et billede.
Brug af faste værdier til at indstille venstre kant af et billede
Dette eksempel viser, hvordan man bruger faste værdier til at indstille venstre kant af et billede.
Brug af procenter til at indstille venstre kant af et billede
Dette eksempel viser, hvordan man bruger procenter til at indstille venstre kant af et billede.
Brug af faste værdier til at indstille højre kant af et billede
Dette eksempel viser, hvordan man bruger faste værdier til at indstille højre kant af et billede.
Brug af procenter til at indstille højre kant af et billede
Dette eksempel viser, hvordan man bruger procenter til at indstille højre kant af et billede.
Hvordan man bruger rullespind til at vise overskydende indhold i et element
Dette eksempel viser, hvordan man indstiller overflow-attributten til at definere en handling, når indholdet i et element er for stort til at passe i den angivne region.
Hvordan man skjuler overskydende indhold i et overskydende element
Dette eksempel viser, hvordan man indstiller overflow-attributten til at skjule indhold, når indholdet i et element er for stort til at passe i den angivne region.
Hvordan man indstiller browseren til automatisk at håndtere overskydende indhold
Dette eksempel viser, hvordan man indstiller browseren til automatisk at håndtere overskydende indhold.
Indstilling af elementets form
Dette eksempel viser, hvordan man kan indstille formen på et element. Dette element bliver klippet til denne form og vises.
Lodret placering af billeder
Dette eksempel viser, hvordan man kan placere billeder lodret i teksten.
Z-index
Z-index kan bruges til at placere et element efter et andet.
Z-index
Elementet i de ovenstående eksempler har ændret Z-index.

CSS Positioneringsegenskaber

CSS Positioneringsegenskaber giver dig mulighed for at positionere elementer.

Egenskab Beskrivelse
position Placer elementet i en statisk, relativ, absolut eller fast position.
top Definerer afstanden mellem den øvre ydre kant af det positionerede element og den øvre kant af indholdskassen.
right Definerer afstanden mellem den højre ydre kant af det positionerede element og den højre kant af indholdskassen.
bottom Definerer afstanden mellem den nederste ydre kant af det positionerede element og den nederste kant af indholdskassen.
left Definerer afstanden mellem den venstre ydre kant af det positionerede element og den venstre kant af indholdskassen.
overflow Definerer, hvad der sker, når elementets indhold overskrider dens område.
clip Indstil elementets form. Elementet klippes ind i denne form og vises derefter.
vertical-align Indstil elementets lodrette justering.
z-index Indstil elementets stakkesekvens.