Placering af elementer med float, position og display

Under normale omstændigheder, placeres de elementer man koder, der hvor koden er. Det giver intuitivt mening, og elementet flytter sig når man scroller på siden, så det ikke hele tiden er synligt. Men, der kan være tilfælde hvor nogen gerne vil have at en del af siden altid er synlig, f.eks. en header eller en footer, fordi det er praktisk eller de bare godt kan lide et sådan design. Hvis man har billeder der ikke er så store, giver det nogle gange et pænere resultat at have teksten til at flyde rundt om billedet, i stedet for at have en afbrydelse i teksten.

Der er i sagens natur en række muligheder, og der er, som altid, nogle fremgangsmåder der er mere hensigtsmæssige end andre.

Float er, som navnet antyder, at elementet flyder rundt mellem de andre elementer, hvis man vælger det. Float kan have flg. værdier:

Værdi	Effekt
none	Indholdet flyder ikke om elementet (default).
left	Elementet placeres til venstre, således at det øvrige indhold flyder på højre side af elementet.
right	Elementet placeres til højre, således at det øvrige indhold flyder på venstre side af elementet.
initial	Elementets float-værdi sættes til default-værdien.
inherit	Elementet arver sin float-værdi efter parent-elementet.

f.eks. float:left


I det viste eksempel er boksen stillet helt op ad venstremargin. Visuelt er dette ikke altid lige kønt, og man kan selvfølgelig flytte elementet længere ind på siden med margin, i dette tilfælde margin-left. Man skal ligeledes overveje om man vil have lidt afstand fra elementet der flyder og til det omkringliggende. I det viste eksempel er margin-right sat til 5px for lige at skubbe den omkringliggende tekst fri af elementets højre side.

En mangel ved float er, at man ikke kan få indholdet til at flyde på begge sider, svarende til en float:middle. Vær også opmærksom på, at hvis man også har en absolut placering på siden med position (se længere nede), ignoreres float-værdien.

En måde at placere elementer på siden på, som bruges meget ved optimering af brugerfladen er position. Der hvor man skriver sin kode til et element i HTML-filen er ikke nødvendigvis der man vil have elementet vist. Det kunne f.eks. være en footer, der altid er synlig, eller et ikon for "gå til toppen" der først dukker op, når man er scrollet så langt ned ad siden, at det giver mening med den funktion.

Position kan have flg. værdier:

Værdi	Effekt
static	Elementet vises som de er placeret i koden (default).
absolute	Elementet placeres et fast sted på siden i forhold til koden.
fixed	Elementet placeres et fast sted i forhold til browservinduet (viewport). Bemærk: Her skal man anvende de fire sidevariabler left, right, top og bottom + en afstand fra siden til elementet.
relative	Elementet placeres relativt i forhold til placeringen i koden, dvs. til finjustering af elementets placering. Bemærk: Her skal man anvende de fire sidevariabler left, right, top og bottom + en afstand til forskydningen af elementet.
sticky	Elementet placeres i forhold til brugerens scroll-position, dvs. der skiftes mellem relative og fixed placering, når man scroller. Bemærk: Understøttes ikke af IE/Edge til og med ver. 15. Understøttes ikke af Safari til og med ver. 6.1, men, har man brug for at understøtte Safari 6.1 og tidligere, tilføjes "position: -webkit-sticky;" før "position:sticky". Her skal man anvende de fire sidevariabler left, right, top og bottom + en afstand til siden, hvor elementet skal stoppe.
initial	Elementets position-værdi sættes til default-værdien.
inherit	Elementet arver sin position-værdi efter parent-elementet.

position:static


position:absolute


position:fixed


position:relative


position:sticky

Display er en setting for hvordan visningen af et element skal håndteres. Der ligger i tags som f.eks. SPAN, DIV og TABLE en række implicitte egenskaber i forhold til visningen, som det kan være ønskeligt at justere, f.eks. DIV der opfører sig som et inline element, fordi det kan noget andet end en SPAN, som man har brug for. Det er ligeledes ikke alle dele af en side man nødvendigvis vil have vist før der f.eks. klikkes på et område, som det er tilfældet med denne sides drop-down-menuer.

Værdi	Effekt
inline	Elementet vises som et inline-element. Værdien sætter visse andre variabler ud af funktion, f.eks. block-elementets height og width.
block	Elementet vises som et block-element.
inline-block	Elementet vises som et inline-element, men variabler fra block-element som height og width fungerer.
none	Elementet fjernes helt. Eksempler vist her
run-in	Elementet vises som block- eller inline-element afhængig af det efterfølgende element. Bemærk: Værdien fungerede kun på enkelte gamle versioner af nogle få browsere, og er ikke anvendelig i dag.
list-item	Elementet behandles og vises som en LI-tag.
inline-table	Elementet vises som en tabel, men inline.
table	Elementet behandles og vises som en TABLE-tag.
table-caption	Elementet behandles og vises som en CAPTION-tag.
table-column-group	Elementet behandles og vises som en COLGROUP-tag.
table-header-group	Elementet behandles og vises som en THEAD-tag.
table-footer-group	Elementet behandles og vises som en TFOOT-tag.
table-row-group	Elementet behandles og vises som en TBODY-tag.
table-cell	Elementet behandles og vises som en TR-tag.
table-column	Elementet behandles og vises som en COL-tag.
table-row	Elementet behandles og vises som en TR-tag.
flex inline-flex	Bruges til flexbox i adaptive design, som gennemgås her.
grid inline-grid	Bruges til grid i adaptive design, som gennemgås her.
initial	Elementets display-værdi sættes til default-værdien.
inherit	Elementet arver sin display-værdi efter parent-elementet.

Et par eksempler på praktisk anvendelse:

display:inline-table
At vise noget som inline-table er især praktisk ved formler og andre typografiske udfordringer, hvor man skal have tal, bogstaver og andre tegn til at stå ovenpå hinanden, hvilket HTML slet ikke er gearet til. Det kunne f.eks. være isotoper som

2

1

H. Hvis vi ser på koden:



Så kommer det til at se således ud:



display:list-item
Man kan få en tag som f.eks. en DIV til at optræde som et list item, dvs. tag'en LI. Den praktiske anvendelse af dette vil kun være relevant ved mere avancerede sider, men effekten er lidt interessant fra et teknisk synspunkt. Hvis man har en DIV med display:list-item i en UL-tag, vil man, som man kunne forvente, få en bullet:



Den samme DIV i en ordnet liste (OL-tag):



Der hvor det bliver interessant med de ordnede lister er, at den fortløbende nummerering også fungerer, når der kommer LI-tags med: