Den sidste store ting i css vi skal have dækket ind er position.

Med position kan vi flytte objekter ud af dokument flowet og placere den i et lag ovenpå websiden. Position har 4 værdier static, relative, absolute og fixed. Static er ikke så interessant da det er det samme som den grundværdi alle elementer har.

Position relative

.box1 {
	position: relative;
	left:100px;
	width: 100px;
	height: 100px;
	background-color: green;
}
.box2 {
	width: 100px;
	height: 100px;
	background-color: blue;
}
.box3 {
	width: 100px;
	height: 100px;
	background-color: red;
}

position relative

box1 flytter sig 100px left i forhold til sin egen oprindelige position.Læg mærke til at boxen stadig udfylder sin oprindelige plads i dokument flow.

In action:
Prøv at sætte position; relative; bottom: 3px; på hover state i den horizontale menu (nav ul li a:hover).

Position absolute

.box1 {
	position: absolute;
	left:100px;
	width: 100px;
	height: 100px;
	background-color: green;
}

I absolute position vil elementet flytte sig helt ud af dokument flow – og den plads som elementet har i flowet vil blive ledig derfor vil box2 flytte sig op på den ledige plads.

Kombinationen af relative og absolute position

.box1 {
	position: relative;
	left:100px;
	width: 100px;
	height: 100px;
	background-color: green;
}
.box2 {
	position: absolute;
	left:50px;
	width: 100px;
	height: 100px;
	background-color: blue;
}

Hvis vi inde i et div element som har fået egenskaben position relative – placere en div-box med position absolute – så kan vi fastlåse elementet med position absolute i forhold til elementet med egenskaben position relative.

In action:
Vi laver et lille logo fx <*)))>{ en fisk i photoshop png med transparent baggrund.
Vi placere det i en div box #logo – og div boxen (absolute) placeres i headeren (relative).

Position fixed

Position fixed vil fixere et element i browser vinduet – det kan være en menu som heletiden følger med i toppen eller bunden af vinduet – eller en irriterende reklame – en hjælpefunktion etc.

.box {
      position:fixed;
      right:0px;
      top:50;
     }

Sæt følgende css ind i et nyt html dokument og se hvordan det fungere:

.box1 {
	position: relative;
	left:200px;
	top:100px;
	width: 800px;
	height: 100px;
	background-color: green;
}
.box2 {
	position: absolute;
	right:50px;
	width: 100px;
	height: 100px;
	background-color: blue;
}
.box3 {
	position: fixed;
	right:0px;
	width: 100px;
	height: 100px;
	background-color: red;
}

Opgave til position fixed:

Lav en box evt med billedsymbol som hele tiden er i bunden af browseren fixed bottom 0 og lav et internt link på det som sender brugeren til toppen af siden.