Egenskabet position
Egenskabet position angiver metoden til positionering
af elementer. Denne egenskab bruges oftest
sammen med egenskaberne
top,
right,
bottom,
left,
som indstiller afstandene
øverst, højre, nederst, venstre henholdsvis.
Syntaks
selektor {
position: absolute | relative | fixed | static | sticky;
}
Værdier for position
| Værdi | Beskrivelse |
|---|---|
absolute |
Absolut positionering. Elementet fjernes fra dokumentets normale flow og positioneres i forhold til den nærmest positionerede forfader (hvis til stede) eller i forhold til browserens vindue. |
relative |
Relativ positionering. Elementet forskydes i forhold til sin normale position i dokumentets flow, men pladsen, som det optog, forbliver reserveret. |
fixed |
Fastgjort positionering. Elementet fjernes fra dokumentets normale flow og positioneres i forhold til browserens vindue. Forbliver på plads under scrolling af siden. |
static |
Statisk positionering. Værdien betyder fravær af positionering og elementet opfører sig normalt. |
sticky |
Klistrende positionering.
Elementet opfører sig som relative, indtil det når den angivne
position under scrolling, hvorefter det klistrer fast på det angivne sted
(som fixed).
|
Standardværdi: static.
Eksempel . Absolut positionering
Lad os placere elementet i øverste venstre hjørne af skærmen med små afstande:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Eksempel . Absolut positionering
Og nu placerer vi elementet i øverste højre hjørne af skærmen med små afstande:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
right: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Eksempel . Fastgjort positionering
Ved fastgjort positionering forbliver elementet på plads under scrolling:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: fixed;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Eksempel . Relativ positionering
Ved relativ positionering forskydes elementet i forhold til sin normale position, men andre elementer opfører sig, som om elementet ikke blev forskudt:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
display: flex;
justify-content: flex-row;
}
.elem {
margin: 0 3px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
.elem2 {
position: relative;
top: 20px;
left: 30px;
background-color: #e6addf;
}
:
Eksempel . Indlejring
Hvis forælderen har egenskaben position
sat til værdien relative,
så vil absolut positionerede elementer
blive positioneret i forhold til
forælderen:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Eksempel . Indlejring
Hvis forælderen har egenskaben position
sat til værdien absolute,
så vil absolut positionerede elementer
blive positioneret i forhold til
forælderen:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: absolute;
top: 30px;
left: 30px;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Eksempel . Klistrende positionering
Hvis for et element egenskaben position
har værdien sticky, så opfører elementet
sig som relative, indtil det når den angivne
position under scrolling, hvorefter det klistrer fast på stedet.
Lad os lave en klistrende header:
<h1>Main Site Header</h1>
<div class="header">header header header</div>
<div class="main">
some long text
</div>
h1 {
text-align: center;
}
.header {
position: sticky;
top: 0;
padding: 20px;
background: #f0f0f0;
text-align: center;
font-weight: bold;
}
.main {
width: 400px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 20px;
text-align: justify;
}
:
Eksempel . Uden position
Hvis et element får absolut positionering uden angivelse af position, så forbliver elementet stående på det sted, hvor det stod uden positionering, men andre elementer vil ophøre med at bemærke det:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Eksempel . En akse
Ved absolut positionering kan man angive position
kun langs en akse.
For eksempel, hvis vi angiver egenskaben top,
så vil elementet lodret indtage den ønskede
position, men vandret forbliver det stående,
der, hvor det stod:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Eksempel . Alle positioner
Ved absolut positionering kan man angive positioner fra alle sider, uden at angive bredde og højde. I dette tilfælde vil elementet placere sig i midten af forælderblokken:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: #add8e6;
}
:
Se også
-
egenskaben
z-index,
som angiver overlapping af elementer
