Vill du förbättra dina designkunskaper och förbättra användarupplevelsen på din webbplats? Det är lättare med en fullständig förståelse för de olika CSS-metoderna för att placera element. Du kan bygga en fantastisk webbsida med en grundläggande förståelse för webbdesign. Men huvudproblemet uppstår när ditt webbprojekt blir mer detaljorienterat, särskilt om det kräver komplex anpassning av element på sidan.
Lyckligtvis kan du förbättra din webbplats funktionalitet och påskynda ditt arbetsflöde genom att använda korrekt CSS-positionering. Låt oss utforska olika CSS-positioneringsegenskaper och granska de olika layouterna du kan använda för att skapa en modern webbsida.
Vad är egenskapen för CSS-position?
CSS placera egenskap definierar positionen för ett element. Du kan manipulera platsen för ett element med vänster, höger, topp, botten, och z-index egenskaper. Även om du kan använda CSS Flexbox eller CSS Grid för att skapa symmetriska webbplatser, hjälper positionsegenskaper dig att bygga asymmetriska webbplatser genom att ta bort varje element från andra element.
Med andra ord, egenskapen CSS position tillåter element att röra sig fritt i ett dokument.
Syntaxen för CSS-positionsegenskapen är:
position: value;
Här är de fem värden som positionsegenskapen kan ta:
- statisk relativ absolut fast klibbig
OBS: Du kan placera element med hjälp av egenskaperna för vänster, höger, topp och botten. Men dessa egenskaper beter sig olika, beroende på positionens värde.
CSS statisk positionering
Statisk är standardpositionen för HTML-element. Låt oss titta på några exempel på HTML för att förstå det:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Position Property</title>
<link rel="stylesheet" href="https://ipotek.net/forsta-css-positionsegenskapen-med-praktiska-exempel/style.css">
</head>
<body>
<div class="parent_container utility-flex">
<div class="child_1 utility-flex">Child 01</div>
<div class="child_2 utility-flex">Child 02</div>
<div class="child_3 utility-flex">Child 03</div>
</div>
</body>
</html>
Vi har placerat tre barn i en föräldracontainer. Vi kommer att använda det här exemplet för att leka med de olika positionsegenskaperna. Här är bas-CSS som vart och ett av våra exempel kommer att använda:
.utility-flex {
display: flex;
justify-content: center;
align-items: center;
}.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
}
.child_1,
.child_2,
.child_3 {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 600;
background: #e961ee;
border: 5px solid rgb(255, 255, 255);
width: 300px;
height: 100px;
color: rgb(238, 238, 238);
border-radius: 5px;
margin: 5px;
}
Nu, låt oss lägga till position: statisk till det andra barnet med botten och höger egenskaper.
.child_2 {
position: static;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}
Här är resultatet:
Som du kan se gäller gränsegenskapen men det är ingen skillnad i den andra underordnade placeringen. Om du inte använder en CSS-positionsegenskap kommer den att ha statisk som standardvärde. Detta positionerar ett element enligt standardsidflödet. Alla element med en statisk position ignorerar egenskaperna för vänster, höger, topp, botten och z-index.
CSS relativ positionering
När du tillämpar relativ positionering kommer ett element initialt att bete sig på samma sätt som för statisk positionering. Men nu kommer egenskaperna för vänster, höger, topp, botten och z-index att fungera genom att flytta det valda elementet från dess ursprungliga position i den angivna riktningen.
Låt oss ändra positionsvärdet för det andra barnet från statiskt till relativt med samma topp- och bottenegenskaper som tidigare.
.child_2 {
position: relative;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}
Här är resultatet:
Som du kan se förskjuts det andra barnet 40 px från botten (mot toppen) och 50 px från höger (mot vänster).
CSS absolut positionering
Alla element med absolut positionering tas bort från dokumentets normala flöde. Andra element kommer att bete sig som om det elementet inte finns i dokumentet. Elementets slutliga position bestäms av egenskaperna för topp, botten, vänster och höger.
Observera att ett element med absolut positionering är placerat i förhållande till dess närmaste positionerade (icke-statiska) förfader. Om det inte finns någon positionerad förfader, placeras den i förhållande till det initiala innehållsblocket.
Låt oss förstå detta med två exempel. För det första, ett absolut positionerat barn utan någon positionerad förfader:
.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
}.child_2 {
position: absolute;
bottom: 190px;
right: 500px;
border: 8px solid purple;
}
Här är resultatet:
I det här andra exemplet har den överordnade behållaren en icke-statisk position:
.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
position: relative;
}.child_2 {
position: absolute;
bottom: 20px;
right: 150px;
border: 8px solid purple;
}
Barnet är nu placerat i förhållande till sin behållare:
CSS fast positionering
Ett element med en fast position tas också bort från dokumentets normala flöde. Det finns inget utrymme skapat för det elementet i hela sidlayouten. Den är placerad i förhållande till det initiala innehållsblocket som ställts in av viewporten (förutom när någon av dess förfäder har en filter-, transform- eller perspektivegenskap inställd på något annat värde än inget). De övre, vänstra, högra och nedre egenskaperna avgör elementets slutliga position.
Låt oss justera vårt befintliga exempel genom att lägga till fler barn. Tidigare har vi fixat föräldracontainerns höjd. Låt oss ta bort den och ställa in flex-direction: kolumn så att vår flexbehållare är tillräckligt stor för att scrolla ner och visualisera resultatet. Lägg nu till fast positionsegenskap till det andra barnet som visas nedan:
.utility-flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
/* height: 400px; */
margin: auto;
/* position: relative; */
}
.child_2 {
position: fixed;
bottom: 300px;
right: 100px;
border: 8px solid purple;
}
Här är resultatet:
Så rullning påverkar inte det andra barnets position alls. Dess position är fixerad i förhållande till det ursprungliga innehållsblocket som ställts in av visningsporten. Ibland kan rullande element orsaka prestanda- och tillgänglighetsproblem. Du kan skapa en tillgänglig webbplats med semantisk HTML och CSS.
CSS Sticky Positioning
Ett element med klibbig positionering har blandade egenskaper av relativ och fast positionering. Ett klibbigt placerat element kommer att följa relativa positioneringsegenskaper tills det passerar den specificerade tröskeln. Efter det kommer det att bete sig som om det vore fixat tills det når gränsen för sin förälder.
Du kan ange tröskeln med hjälp av egenskaperna för vänster, höger, övre och nedre. Utan en tröskel kommer elementet att bete sig som om det hade en relativ positionering.
Låt oss ställa in den andra underordnade positionen till klibbig med en övre tröskel:
.child_2 {
position: sticky;
top: 0px;
border: 8px solid purple;
}
Här är resultatet:
Som du kan se beter sig det andra barnet som de andra barnen när det rullar. Men när den når tröskelvärdet (översta: 0px) beter den sig som om den vore fixerad och lämnar det normala dokumentflödet. Du kan få ett navigeringsfält att fästa vid rubriken med klibbig positionering.
Slutsats
CSS-positionsegenskapen är en avancerad webbdesignfärdighet. Det kräver lite lärande, men allt du behöver göra är att leka med olika värderingar, resultat och undantag. Kom ihåg att ingenting kan slå övning när det gäller att skapa en fantastisk webbdesign. Så fortsätt att öva så blir du bättre. Glad kodning!
Om författaren
Naincy Mourya (19 artiklar publicerade)
Naincy är specialiserat på att bygga mycket responsiva webbplatser och effektiv innehållsstrategi tillsammans med webbkopior. Hon är en frilansande teknikskribent som håller ett skarpt öga på trendteknologi.
Mer från Naincy Mourya
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
