Absolut Positionering i CSS
Brug af absolut positionering fjerner elementet fra dets normale dokumentflow, hvilket gør det muligt for andre nærliggende elementer at udfylde pladsen. Elementets top, left, bottom og right positioneringsværdier beregnes i forhold til dets nærmeste forfader med ikke-statisk positionering. Hvis der ikke findes en sådan forfader, bestemmes værdierne ud fra kanterne på <body>-elementet.
position: absolute;
Generelt anvendes absolut positionering i kombination med relativ positionering, da det er nødvendigt at placere et element i forhold til et andet element i dokumentflowet.
Overvej følgende eksempel. Opgaven er at placere bynavnet (et <span>-element med klassen description) i øverste højre hjørne af bykortet (et <div>-element med klassen card). Vær opmærksom på positionerings-egenskaben for de forskellige elementer.
index.html
index.css
I dette eksempel er .description-elementerne placeret absolut inde i .card-elementerne, takket være position: relative; anvendt på .card. Denne placering placerer bynavnene i øverste højre hjørne af hvert kort.
Vi kan flytte elementet i forhold til et andet element. Hvordan fungerer det? Vi skal anvende position: relative; på det element, som er forfader til det element, vi ønsker at placere absolut. Ellers vil elementet blive placeret i forhold til <body>-elementet.
Bemærk
Når du angiver egenskaberne
top,left,rightogbottomfor det absolut positionerede element, beregner browseren dem ud fra kanterne på det relativt positionerede element. Dette kan opfattes som at anvende en margin på det underordnede element inde i det overordnede element.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 2.04Absolut Positionering i CSS
Stryg for at vise menuen
Brug af absolut positionering fjerner elementet fra dets normale dokumentflow, hvilket gør det muligt for andre nærliggende elementer at udfylde pladsen. Elementets top, left, bottom og right positioneringsværdier beregnes i forhold til dets nærmeste forfader med ikke-statisk positionering. Hvis der ikke findes en sådan forfader, bestemmes værdierne ud fra kanterne på <body>-elementet.
position: absolute;
Generelt anvendes absolut positionering i kombination med relativ positionering, da det er nødvendigt at placere et element i forhold til et andet element i dokumentflowet.
Overvej følgende eksempel. Opgaven er at placere bynavnet (et <span>-element med klassen description) i øverste højre hjørne af bykortet (et <div>-element med klassen card). Vær opmærksom på positionerings-egenskaben for de forskellige elementer.
index.html
index.css
I dette eksempel er .description-elementerne placeret absolut inde i .card-elementerne, takket være position: relative; anvendt på .card. Denne placering placerer bynavnene i øverste højre hjørne af hvert kort.
Vi kan flytte elementet i forhold til et andet element. Hvordan fungerer det? Vi skal anvende position: relative; på det element, som er forfader til det element, vi ønsker at placere absolut. Ellers vil elementet blive placeret i forhold til <body>-elementet.
Bemærk
Når du angiver egenskaberne
top,left,rightogbottomfor det absolut positionerede element, beregner browseren dem ud fra kanterne på det relativt positionerede element. Dette kan opfattes som at anvende en margin på det underordnede element inde i det overordnede element.
Tak for dine kommentarer!
