Elementplacering i CSS

 

Position ift. andre elementer

For at justere positionen for et element i forhold til andre elementer på hjemmesiden, så skal man benytte erklæringen position. Denne erklæring kan have fire værdier: static, absolute, fixed og relative.

Nedenstående kodestykke vil blive brugt som eksempel i dette afsnit. I nedenstående kodestykke er der angivet to <div>-elementer: Grøn_boks og Blå_boks. De er blevet stylet så de begge er 100px høje og 100px brede:

<div class = "Grøn_boks"></div>
<div class = "Blå_boks"></div>

 

static

static er standardværdien for position. Denne værdi gør at elementet indlæses på sin plads i forhold til hvor den er placeret i HTML-filen.

Grøn_boks og Blå_boks vil blive indlæst på hjemmesiden så Grøn_boks, som står øverst i HTML-filen, vil blive indlæst øverst på siden og Blå_boks, som står nedenunder i HTML-filen, vil blive indlæst nedenunder på siden. De to elementer overlapper ikke hinanden:

 

relative

Værdien relative gør at elementet indlæses relativt til sin normale position på hjemmesiden. Ved at sætte positionens værdi til relative kan man justere elementets placering på siden med erklæringerne: top, right, bottom og left som henholdvis justerer afstanden fra toppen, højre, bunden og venstre i forhold til elementets normale position. Når man ændrer elementets position, så vil andre elementer ikke automatisk blive justeret til at overtage tomrummet fra elementets normale position.

I nedenstående kodestykke har Blå_boks fået position-værdien relative. Den flyttes 150 pixels til højre ved at indsætte 150 pixels på den venstre side af boksen:

.Blå_boks {
  position: relative;
  left: 150px;
}

Det resulterer i at boksene nu vil have følgende positioner på nedenstående side:

 

absolute

Værdien absolute gør at elementet bliver ignoreret af alle andre elementer på hjemmesiden. Det betyder at elementet ikke vil placeres nedenunder et allerede eksisterende element, men vil derimod placeres helt oppe øverst til venstre på siden. Ligesom med relative kan man også justere elementets placering på siden med erklæringerne: top, right, bottom og left som henholdvis justerer afstanden fra toppen, højre, bunden og venstre.

I nedenstående kodestykke har Blå_boks fået position-værdien absolute. Den flyttes 50 pixels til højre og 50 pixels ned:

.Blå_boks {
  position: absolute;
  left: 50px;
  top: 50px;
}

Det resulterer i at boksene nu vil have følgende positioner på nedenstående side:

Bemærk, at hvis ikke Blå_boks blev flyttet ned og til venstre, så ville den helt dække Grøn_boks, så man ikke ville kunne se den.

 

fixed

Værdien fixed gør at elementet bliver ignoreret af alle andre elementer på hjemmesiden, ligesom med absolute. Med fixed vil elementet være samme sted på siden hele tiden uanset hvor man scroller hen.

I nedenstående kodestykke har Blå_boks fået position-værdien fixed:

.Blå_boks {
  position: fixed;
}

For at illustrere hvordan det ser ud kan du kigge på knappen nederst til højre på hjemmesiden med en opadpegende pil. Ligemeget hvor du scroller hen, så vil pilen følge med. Det er fordi, at dens position er fixed.

 

Display

Nogle elementer benytter hele den horisontalle plads på hjemmesiden der hvor de er placeret, mens andre elementer kun benytter den horisontalle plads som indholdet kræver.

For at bestemme om et element kan dele den horisontalle plads med andre elementer, så skal man benytte erklæringen display. De tre vigtigste værdier som display kan gives er inline, block og inline-block. Disse tre værdier vil blive gennemgået her.

 

inline

inline er standardværdien for elementer som f.eks. <a>, <strong> og <em>. Når værdien er inline, så vil elementet kun tage den plads som elementets indhold kræver, så det næste element kan stå på samme linje, hvis der er plads nok.

I nedenstående kodestykke er der tilføjet en paragraf imellem to sætninger inde i et <div>-element. position er sat til at være inline:

<div style = "position: inline;">
Dette er en sætning inde i elementet. 
<p>Dette er en tilføjet paragraf imellem de to sætninger. </p> 
Dette er endnu en sætning inde i elementet.
</div>

Ovenstående kodestykke vil resultere i, at <p>-elementet vil stå på samme linje som alt det andet indhold:

block

block er standardværdien for elementer som f.eks. <p>, <div>, <ul> og <ol>. Når værdien er block, så vil elementet fylde hele den horisontale bredde på siden. Det betyder, at hvis man tilføjer endnu et element, så vil det blive rykket nedenunder.

I nedenstående kodestykke er der tilføjet en paragraf imellem to sætninger inde i et <div>-element. position er sat til at være block:

<div style = "position: block;">
Dette er en sætning inde i elementet. 
<p>Dette er en tilføjet paragraf imellem de to sætninger. </p> 
Dette er endnu en sætning inde i elementet.
</div>

Ovenstående kodestykke vil resultere i, at <p>-elementet vil gå ned på en selvstændig linje:

Dette er en sætning inde i elementet.

Dette er en tilføjet paragraf imellem de to sætninger.

Dette er endnu en sætning inde i elementet.

 

inline-block

inline-block er ligesom inline med den undtagelse af man kan tilføje en højde og bredde på elementerne. Elementerne vil stå på samme linje, hvis der er plads nok.

I nedenstående kodestykke er der tilføjet en paragraf imellem to sætninger inde i et <div>-element. position er sat til at være inline-block:

<div style = "position: inline-block;">
  Dette er en sætning inde i elementet. 
  <p>Dette er en tilføjet paragraf imellem de to sætninger. </p> 
  Dette er endnu en sætning inde i elementet.
</div>

Ovenstående kodestykke vil resultere i, at <p>-elementet vil stå på samme linje som alt det andet indhold:

Float og Clear

Float

Hvis man vil bestemme om et element skal stå i højre eller venstre side af hjemmesiden, så kan man benytte erklæringen float. Denne erklæring har to værdier:

• left – Elementet rykkes så langt til venstre som muligt. Dette er standardværdien
• right – Elementet rykkes så langt til højre som muligt

I nedenstående kodestykke bliver en grøn boks, som er 100 pixels høj og bred rykket til højre ved hjælp af float:

.Grøn_boks {
  float: right;
}

Det vil resultere i, at den grønne boks ryger ud til højre på siden:

 

 

 

 

Clear

Man kan benytte erklæringen clear for at bestemme hvordan elementerne skal opføre sig, hvis de støder ind i hinanden når man flytter dem til højre eller venstre med float. Denne erklæring har fire værdier: none, left, right og both:

• left – Den venstre side af elementet vil ikke røre et andet element
• right –  Den højre side af elementet vil ikke røre et andet element
• both – Hverken højre eller venstre side vil røre et andet element
• none – Elementet kan røre begge sider

 

Overlapning

For at bestemme hvilket element der skal stå foran hvilke når to eller flere elementer overlapper hinanden, så skal man benytte erklæringen z-index. Denne erklæring kan have en talværdi som indikerer, hvor langt fremme den skal stå. Jo højere tallet er, jo længere foran vil elementet være. Bemærk at z-index kun er relevant for elementer som har en position der er absolute, da de ellers ikke ville kunne gå oveni hinanden.

På nedenstående kodestykke har Grøn_boks fået et z-indeks på 2:

.Grøn_boks {
  z-index: 2;
}

På nedenstående kodestykke har Blå_boks fået et z-indeks på 1:

.Blå_boks {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
}

Eftersom at Grøn_boks har en højere z-index-værdi end Blå_boks så vil den stå foran Blå_boks:

 

Gennemsigtighed

Et element kan blive gjort gennemsigtigt med erklæringen opacity. Værdien for denne erklæring er et decimaltal mellem 0 og 1. Jo tættere på 0, jo mere gennemsigtigt bliver elementet.

opacity er mest benyttet på billeder, men kan også benyttes på andre elementer.

I nedenstående kodestykke sættes gennemsigtigheden ned til 0.3 på et billede:

.Gennemsigtigt_billede {
  opacity: 0.3;
}

Det vil resultere i, at billedet ser sådan her ud:

 

Synlighed

Man kan bestemme om et element skal være synligt eller ej med erklæringen visibility. Denne erklæring kan have følgende to værdier:

• visible – elementet er synligt på hjemmesiden. Dette er standardværdien
• hidden – elementet er usynligt på hjemmesiden

Bemærk, at selvom elementet er usynligt, så vil det stadig optage plads.

I nedenstående kodestykke benyttes erklæringen til at gøre elementet med id’en “Element” usynligt:

.Element {
  visibility: hidden;
}