Absolut Positionering i CSS
Att använda absolut positionering tar bort elementet från det normala dokumentflödet, vilket gör att andra närliggande element kan fylla ut utrymmet. Elementets värden för top, left, bottom och right beräknas i förhållande till dess närmaste förfader med icke-statisk positionering. Om det inte finns någon sådan förfader bestäms värdena utifrån kanterna på <body>-elementet.
position: absolute;
Vanligtvis används absolut positionering i kombination med relativ positionering eftersom vi behöver placera ett element i förhållande till ett annat element i dokumentflödet.
Tänk på följande exempel. Uppgiften är att placera stadsnamnet (ett <span>-element med klassen description) i det övre högra hörnet av stadskortet (ett <div>-element med klassen card). Var uppmärksam på position-egenskapen för de olika elementen.
index.html
index.css
I det här exemplet är elementen .description absolut positionerade inuti elementen .card, tack vare att position: relative; har tillämpats på .card. Denna positionering placerar stadsnamnen i det övre högra hörnet av varje kort.
Vi kan flytta elementet i förhållande till ett annat element. Hur fungerar det? Vi behöver tillämpa position: relative; på det element som är förfader till det element vi vill positionera absolut. Annars kommer elementet att positioneras i förhållande till <body>-elementet.
Obs
När egenskaperna
top,left,rightochbottomanges för det absolut positionerade elementet, beräknar webbläsaren dessa med utgångspunkt från den relativt positionerade elementets kanter. Detta kan ses som att ett marginalvärde appliceras på barnelementet inuti förälderelementet.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 2.04Absolut Positionering i CSS
Svep för att visa menyn
Att använda absolut positionering tar bort elementet från det normala dokumentflödet, vilket gör att andra närliggande element kan fylla ut utrymmet. Elementets värden för top, left, bottom och right beräknas i förhållande till dess närmaste förfader med icke-statisk positionering. Om det inte finns någon sådan förfader bestäms värdena utifrån kanterna på <body>-elementet.
position: absolute;
Vanligtvis används absolut positionering i kombination med relativ positionering eftersom vi behöver placera ett element i förhållande till ett annat element i dokumentflödet.
Tänk på följande exempel. Uppgiften är att placera stadsnamnet (ett <span>-element med klassen description) i det övre högra hörnet av stadskortet (ett <div>-element med klassen card). Var uppmärksam på position-egenskapen för de olika elementen.
index.html
index.css
I det här exemplet är elementen .description absolut positionerade inuti elementen .card, tack vare att position: relative; har tillämpats på .card. Denna positionering placerar stadsnamnen i det övre högra hörnet av varje kort.
Vi kan flytta elementet i förhållande till ett annat element. Hur fungerar det? Vi behöver tillämpa position: relative; på det element som är förfader till det element vi vill positionera absolut. Annars kommer elementet att positioneras i förhållande till <body>-elementet.
Obs
När egenskaperna
top,left,rightochbottomanges för det absolut positionerade elementet, beräknar webbläsaren dessa med utgångspunkt från den relativt positionerade elementets kanter. Detta kan ses som att ett marginalvärde appliceras på barnelementet inuti förälderelementet.
Tack för dina kommentarer!
