CSS -lay-out - De positie- eigenschap
De positioneigenschap specificeert het type positioneringsmethode dat voor een element wordt gebruikt (statisch, relatief, vast, absoluut of plakkerig).
De positie Property
De positioneigenschap specificeert het type positioneringsmethode dat voor een element wordt gebruikt.
Er zijn vijf verschillende positiewaarden:
staticrelativefixedabsolutesticky
Elementen worden vervolgens gepositioneerd met behulp van de eigenschappen boven, onder, links en rechts. Deze eigenschappen werken echter alleen als de position
eigenschap als eerste is ingesteld. Ze werken ook anders, afhankelijk van de positiewaarde.
positie: statisch;
HTML-elementen zijn standaard statisch gepositioneerd.
Statisch gepositioneerde elementen worden niet beïnvloed door de eigenschappen boven, onder, links en rechts.
Een element met position: static;is niet op een speciale manier gepositioneerd; het is altijd gepositioneerd volgens de normale stroom van de pagina:
Hier is de CSS die wordt gebruikt:
Voorbeeld
div.static {
position: static;
border: 3px solid #73AD21;
}
positie: relatief;
Een element met position: relative;is gepositioneerd ten opzichte van zijn normale positie.
Als u de eigenschappen boven, rechts, onder en links van een relatief gepositioneerd element instelt, wordt het van zijn normale positie afgesteld. Andere inhoud wordt niet aangepast om te passen in de ruimte die door het element wordt achtergelaten.
Hier is de CSS die wordt gebruikt:
Voorbeeld
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
positie: vast;
Een element met position: fixed;wordt relatief ten opzichte van de viewport gepositioneerd, wat betekent dat het altijd op dezelfde plaats blijft, zelfs als de pagina wordt gescrold. De eigenschappen boven, rechts, onder en links worden gebruikt om het element te positioneren.
Een vast element laat geen opening achter op de pagina waar het normaal gesproken zou hebben gestaan.
Let op het vaste element in de rechterbenedenhoek van de pagina. Hier is de CSS die wordt gebruikt:
Voorbeeld
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;positie: absoluut;
Een element met position: absolute;is gepositioneerd ten opzichte van de dichtstbijzijnde gepositioneerde voorouder (in plaats van gepositioneerd ten opzichte van de viewport, zoals vast).
Echter; als een absoluut gepositioneerd element geen gepositioneerde voorouders heeft, gebruikt het de hoofdtekst van het document en beweegt het mee met het scrollen op de pagina.
Opmerking: absoluut gepositioneerde elementen worden verwijderd uit de normale stroom en kunnen elementen overlappen.
Hier is een eenvoudig voorbeeld:
Hier is de CSS die wordt gebruikt:
Voorbeeld
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
positie: plakkerig;
Een element met position: sticky;wordt gepositioneerd op basis van de scrollpositie van de gebruiker.
Een plakkerig element schakelt tussen relativeen fixed, afhankelijk van de schuifpositie. Het wordt relatief gepositioneerd totdat een bepaalde offsetpositie in de viewport wordt bereikt - dan "plakt" het op zijn plaats (zoals positie: vast).
Opmerking: Internet Explorer ondersteunt geen plakkerige positionering. Safari vereist een -webkit- prefix (zie voorbeeld hieronder). U moet ook ten minste één van top, right, bottomof specificeren leftom plakkerige positionering te laten werken.
In dit voorbeeld blijft het plakkerige element aan de bovenkant van de pagina ( top: 0) plakken wanneer u de schuifpositie bereikt.
Voorbeeld
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Tekst in een afbeelding plaatsen
Tekst over een afbeelding plaatsen:
Voorbeeld
Probeer het zelf:
Meer voorbeelden
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |