Relativ posisjonering av elementer i CSS
Relativ posisjonering settes med
verdien relative for egenskapen
position. Denne type posisjonering tillater
å forskyve elementer i forhold til sin nåværende
posisjon med en gitt verdi. Samtidig
vil alle andre elementer på siden oppfatte
at elementet står der det opprinnelig sto.
Det vil si at med denne type posisjonering
faller elementet ikke ut av normal flyt.
Forskyvninger fra nåværende posisjon angis med egenskapene
top, right, bottom og
left.
Eksempel
La oss først lage to blokker uten posisjonering:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Eksempel
La oss nå legge til relative til den første blokken.
Ingenting vil endre seg foreløpig, siden
vi ikke har angitt noen forskyvning for blokken:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Eksempel
La oss nå flytte blokken vår 30px
ned fra toppen, ved å angi egenskapen top.
Samtidig vil alle andre elementer oppføre seg
som om blokken vår er på sin opprinnelige
plass:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Eksempel
La oss også flytte blokken vår 40px
fra venstre, ved å angi egenskapen left:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
left: 40px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Eksempel
Negative verdier for egenskapene top, right,
bottom og left forskyver i motsatt
retning. For eksempel, en positiv verdi for
top forskyver nedover, mens en negativ verdi forskyver oppover.
La oss flytte den andre blokken vår 40px
oppover, ved å angi en negativ verdi for
egenskapen top:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
position: relative;
top: -40px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Praktiske oppgaver
Følgende blokker er gitt:
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text
#elem1 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #FF8888;
}
#elem2 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #7E89EB;
}
#elem3 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #4DEE99;
}
:
Forskyv disse blokkene ved hjelp av relativ posisjonering som følger:
