HTML-elementens position spelar en viktig roll för att organisera webbsidans komponenter. Mer specifikt kan elementens position justeras genom att använda CSS ' placera ' fast egendom. Den här egenskapen kan associeras med förskjutningsegenskaper, såsom topp-, vänster-, höger- och bottenegenskaper, vilket ger specifika värden för att justera elementet på sidan. Men den ' absolut ” placerade element kan justeras i förhållande till närmaste positionerade element.
Det här inlägget kommer att förklara CSS:s absoluta positionering.
CSS 'position'-egenskap
den ' placera ”-egenskapen i CSS kan användas för att justera elementets position. Olika värden för positionsegenskapen är fasta, absoluta, relativa, statiska och klibbiga. Dessa värden ställs in med offset-egenskaperna, såsom topp, höger, vänster och botten, för att justera elementets position.
Hur tillämpar jag CSS Absolute Positioning?
Elementets absoluta positionering kan tillämpas med hjälp av CSS ' placera ' egenskap med värdet ' absolut ”. Elementet med den absoluta positionen justeras i enlighet med dess närmaste positionerade moderelement. Men om förfadern inte är placerad, kommer den att anpassa sig i förhållande till kroppsdelen av dokumentet.
Exempel
Låt oss förstå konceptet med ett praktiskt exempel.
Steg 1: Skapa en HTML-fil
I HTML-filen, inom body-elementet, lägg till en div med klassnamnet ' huvud ”. Lägg sedan till en HTML-tagg i den skapade div:en som är kopplad till följande attribut:
-
- ' src ” ger en länk till bilden.
- ' klass ” används i CSS för att utforma elementen.
- ' allt ”-attribut anger texten som visas i stället för bilden om bilden inte kan laddas på sidan.
- ' allt ”-attribut anger texten som visas på sidan istället för bilden om bilden inte kan laddas på sidan.
Lägg sedan till ytterligare en div som innehåller rubriken och styckets h1- och p-element:
< div klass = 'huvudsaklig' >< div klass = 'innehåll' >
< img src = 'images/linuxlogo.png' klass = 'Hem' allt = 'linux logotyp' bredd = '80px' >
< h1 > CSS:s absoluta positionering h1 >
< sid > Hej Linuxhint-teamet ! sid >
div >
div >
I CSS används flera stilegenskaper för att dekorera HTML-elementen.
Steg 2: Style 'alla' element
* {teckensnittsfamilj: Verdana, Genève, Tahoma, sans-serif;
}
HTML-elementen är utformade med hjälp av ' typsnittsfamilj ' egenskap med värdet ' Verdana, Genève, Tahoma, sans-serif ”. Denna lista med värden säkerställer att om webbläsaren inte stöder den första stilen, kommer den andra att tillämpas.
Steg 3: Style 'hem' div
.Hem {position: absolut;
topp: 50px;
vänster: 45px;
}
Nedan visas egenskaperna som tillämpas på ' Hem ” div:
-
- ' placera egenskapen anger elementets position. Här läggs ' absolut ” kommer att placera elementet i förhållande till huvuddelen av HTML.
- ' topp ” egenskapen används för vertikal justering av elementet.
- ' vänster ”-egenskapen används för den horisontella justeringen av elementet.
Steg 4: Style 'innehåll' div
.innehåll {bakgrundsfärg: kadettblå;
bredd: 300px;
höjd: 250px;
padding-vänster: 40px;
marginal-vänster: 80px;
}
Nedan är CSS-egenskaperna som tillämpas på ' innehåll ” div:
-
- ' bakgrundsfärg egenskapen ställer in elementets bakgrundsfärg.
- ' bredd egenskapen anger elementets bredd.
- ' höjd egenskapen anger elementets höjd.
- ' stoppning-vänster ”-egenskapen är inställd för att lägga till utrymme till vänster om elementets innehåll.
- ' marginal-vänster ” egenskapen anger utrymmet på vänster sida av elementet.
Vid det här laget kommer vår webbsida att se ut så här:
Det kan ses från ovanstående resultat att bilden av div-hemmet är placerad på 50px från toppen och 45px från vänster om dokumentets kropp. Dessutom är positionen för hem-div inställd i förhållande till huvuddelen av HTML.
Hur justerar man positionen för elementet 'relativt' till det positionerade överordnade elementet?
Det här avsnittet guidar dig om hur du justerar elementets position i förhållande till närmaste överordnade position.
Ställ in 'position' Egenskapen för 'innehåll' div
position: relativ;
För att justera elementets position i förhållande till det överordnade elementet, ställ in ' placera ' egenskapen för det överordnade elementet till ' släkting ' värde.
Ställ in 'position'-egenskapen för 'img'-elementet
.Hem {position: absolut;
topp: 100px;
vänster: 220px;
}
Här:
-
- ' placera ' egenskap med värdet inställt som ' absolut ” kommer att placeras i förhållande till det överordnade elementet (det vill säga att innehållet div position sätts med värdet relativ).
- ' topp ”-egenskapen används för att ställa in elementets position uppifrån.
- ' vänster ”-egenskapen används för att ställa in elementets position från vänster.
Produktion
Det kan ses av resultatet att bilden har placerats i förhållande till sin överordnade div, och den ser lämplig ut.
Slutsats
CSS ' placera ”-egenskapen används för att ställa in HTML-elementens position. Den här egenskapen kan värderas som fix, relativ, absolut, sticky och statisk. den ' absolut ”-värdet kommer att placera elementet som motsvarar dess närliggande placerade överordnade element. Det här inlägget har förklarat CSS absoluta positionering med ett praktiskt exempel.