Absolutt Posisjonering i CSS
Ved bruk av absolutt posisjonering fjernes elementet fra det normale dokumentflyten, slik at andre nærliggende elementer kan fylle tomrommet. Elementets top, left, bottom og right posisjoneringsverdier beregnes i forhold til nærmeste forfader med ikke-statisk posisjonering. Hvis det ikke finnes en slik forfader, bestemmes verdiene ut fra kantene til <body>-elementet.
position: absolute;
Vanligvis er absolutt posisjonering mest nyttig i kombinasjon med relativ posisjonering, fordi vi ofte ønsker å plassere et element i forhold til et annet element i dokumentflyten.
Vurder følgende eksempel. Målet er å plassere bynavnet (et <span>-element med klassen description) øverst til høyre i bykortet (et <div>-element med klassen card). Legg merke til egenskapen position for de ulike elementene.
index.html
index.css
I dette eksemplet er .description-elementene plassert absolutt inne i .card-elementene, takket være position: relative; brukt på .card. Denne posisjoneringen plasserer bynavnene øverst til høyre i hvert kort.
Vi kan flytte elementet i forhold til et annet element. Hvordan fungerer dette? Vi må bruke position: relative; på elementet som er overordnet til elementet vi ønsker å posisjonere absolutt. Ellers vil elementet bli posisjonert i forhold til <body>-elementet.
Merk
Når du angir egenskapene
top,left,rightogbottomfor et absolutt posisjonert element, beregner nettleseren dem med utgangspunkt i kantene til det relativt posisjonerte elementet. Dette kan sees på som å bruke en margin på barneelementet inne i overordnede element.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you explain the difference between absolute and relative positioning?
How do I use absolute positioning to place an element in a specific corner?
What happens if I don't set position: relative on the parent element?
Awesome!
Completion rate improved to 2.04Absolutt Posisjonering i CSS
Sveip for å vise menyen
Ved bruk av absolutt posisjonering fjernes elementet fra det normale dokumentflyten, slik at andre nærliggende elementer kan fylle tomrommet. Elementets top, left, bottom og right posisjoneringsverdier beregnes i forhold til nærmeste forfader med ikke-statisk posisjonering. Hvis det ikke finnes en slik forfader, bestemmes verdiene ut fra kantene til <body>-elementet.
position: absolute;
Vanligvis er absolutt posisjonering mest nyttig i kombinasjon med relativ posisjonering, fordi vi ofte ønsker å plassere et element i forhold til et annet element i dokumentflyten.
Vurder følgende eksempel. Målet er å plassere bynavnet (et <span>-element med klassen description) øverst til høyre i bykortet (et <div>-element med klassen card). Legg merke til egenskapen position for de ulike elementene.
index.html
index.css
I dette eksemplet er .description-elementene plassert absolutt inne i .card-elementene, takket være position: relative; brukt på .card. Denne posisjoneringen plasserer bynavnene øverst til høyre i hvert kort.
Vi kan flytte elementet i forhold til et annet element. Hvordan fungerer dette? Vi må bruke position: relative; på elementet som er overordnet til elementet vi ønsker å posisjonere absolutt. Ellers vil elementet bli posisjonert i forhold til <body>-elementet.
Merk
Når du angir egenskapene
top,left,rightogbottomfor et absolutt posisjonert element, beregner nettleseren dem med utgangspunkt i kantene til det relativt posisjonerte elementet. Dette kan sees på som å bruke en margin på barneelementet inne i overordnede element.
Takk for tilbakemeldingene dine!
