De positie van de HTML-elementen speelt een cruciale rol bij het organiseren van de webpagina-componenten. Meer specifiek kan de positie van de elementen worden aangepast door gebruik te maken van de CSS “ positie ' eigenschap. Deze eigenschap kan worden gekoppeld aan offset-eigenschappen, zoals eigenschappen voor boven, links, rechts en onder, waardoor specifieke waarden worden opgegeven om het element op de pagina aan te passen. Echter, de ' absoluut ” gepositioneerde elementen kunnen worden aangepast ten opzichte van het dichtstbijzijnde gepositioneerde element.
In dit bericht wordt de absolute CSS-positionering uitgelegd.
CSS-eigenschap 'positie'.
De ' positie ” eigenschap in CSS kan worden gebruikt om de positie van het element aan te passen. Verschillende waarden van de eigenschap position zijn vast, absoluut, relatief, statisch en plakkerig. Deze waarden worden ingesteld met de offset-eigenschappen, zoals boven, rechts, links en onder, voor het aanpassen van de positie van het element.
Hoe CSS absolute positionering toepassen?
De absolute positionering van het element kan worden toegepast met behulp van de CSS ' positie ” eigenschap met de waarde “ absoluut ”. Het element met de absolute positie wordt aangepast overeenkomstig het dichtstbijzijnde bovenliggende element. Maar als de voorouder niet is gepositioneerd, wordt deze aangepast ten opzichte van het hoofdgedeelte van het document.
Voorbeeld
Laten we het concept begrijpen met een praktisch voorbeeld.
Stap 1: Maak een HTML-bestand
Voeg in het HTML-bestand binnen het body-element een div toe met de klassenaam ' voornaamst ”. Voeg vervolgens binnen de gemaakte div een HTML -tag toe die is gekoppeld aan de volgende kenmerken:
-
- “ src ” biedt een link naar de afbeelding.
- “ klas ” wordt gebruikt in de CSS om de elementen te stylen.
- “ alles ” attribuut specificeert de tekst die wordt weergegeven in plaats van de afbeelding als de afbeelding niet op de pagina kan worden geladen.
- “ alles ” attribuut specificeert de tekst die op de pagina wordt weergegeven in plaats van de afbeelding als de afbeelding niet op de pagina kan worden geladen.
Voeg vervolgens nog een div toe met de kop en de h1- en p-elementen van de alinea:
< div klas = 'voornaamst' >< div klas = 'inhoud' >
< img src = 'images/linuxlogo.png' klas = 'thuis' alles = 'linux-logo' breedte = '80 pixels' >
< h1 > De CSS absolute positionering h1 >
< p > Hallo Linuxhint-team ! p >
div >
div >
In CSS worden verschillende stylingeigenschappen gebruikt om de HTML-elementen te versieren.
Stap 2: Stijl 'alle' elementen
* {lettertypefamilie: Verdana, Genève, Tahoma, schreefloos;
}
De HTML-elementen worden opgemaakt met behulp van de ' font-familie ” eigenschap met de waarde “ Verdana, Genève, Tahoma, schreefloos ”. Deze lijst met waarden zorgt ervoor dat als de browser de eerste stijl niet ondersteunt, de andere wordt toegepast.
Stap 3: Stijl “thuis” div
.thuis {positie: absoluut;
boven: 50px;
links: 45px;
}
Hieronder staan de eigenschappen toegepast op de “ thuis ” div:
-
- “ positie ” eigenschap stelt de positie van het element in. Hier de toegevoegde “ absoluut ” plaatst het element relatief ten opzichte van het hoofdgedeelte van de HTML.
- “ bovenkant ” eigenschap wordt gebruikt voor de verticale aanpassing van het element.
- “ links ” eigenschap wordt gebruikt voor de horizontale aanpassing van het element.
Stap 4: Stijl “inhoud” div
.inhoud {achtergrondkleur: kadetblauw;
breedte: 300px;
hoogte: 250px;
opvulling links: 40px;
marge-links: 80px;
}
Hieronder staan de CSS-eigenschappen die worden toegepast op de ' inhoud ” div:
-
- “ Achtergrond kleur ” eigenschap stelt de achtergrondkleur van het element in.
- “ breedte ” eigenschap stelt de breedte van het element in.
- “ hoogte ” eigenschap stelt de hoogte van het element in.
- “ padding-links ” eigenschap is ingesteld om ruimte toe te voegen aan de linkerkant van de inhoud van het element.
- “ marge-links ” eigenschap specificeert de ruimte aan de linkerkant van het element.
Op dit moment ziet onze webpagina er als volgt uit:
Uit het bovenstaande resultaat blijkt dat de afbeelding van de div-home op 50 px vanaf de bovenkant en 45 px vanaf de linkerkant van de hoofdtekst van het document is geplaatst. Bovendien wordt de positie van de home div ingesteld ten opzichte van de body-sectie van de HTML.
Hoe de positie van het element 'relatief' ten opzichte van het gepositioneerde bovenliggende element aanpassen?
Deze sectie zal u begeleiden bij het aanpassen van de positie van het element ten opzichte van het dichtstbijzijnde bovenliggende element.
Set “position” Eigenschap van “content” div
positie: relatief;
Om de positie van het element ten opzichte van het bovenliggende element aan te passen, stelt u de ' positie ” eigendom van het bovenliggende element naar “ familielid ' waarde.
Stel de eigenschap 'position' van het element 'img' in
.thuis {positie: absoluut;
bovenaan: 100px;
links: 220px;
}
Hier:
-
- “ positie ” eigendom met de waarde ingesteld als “ absoluut ” wordt gepositioneerd ten opzichte van het bovenliggende element (dat wil zeggen, content div-positie wordt ingesteld met de waarde relative).
- “ bovenkant ” eigenschap wordt gebruikt voor het instellen van de elementpositie vanaf de bovenkant.
- “ links ” eigenschap wordt gebruikt voor het instellen van de elementpositie vanaf de linkerkant.
Uitgang
Uit het resultaat blijkt dat de afbeelding is gepositioneerd ten opzichte van de bovenliggende div en dat deze er goed uitziet.
Conclusie
De CSS “ positie ” eigenschap wordt gebruikt om de positie van de HTML-elementen in te stellen. Deze eigenschap kan worden gewaardeerd als vast, relatief, absoluut, plakkerig en statisch. De ' absoluut ” waarde zal het element positioneren dat overeenkomt met het nabijgelegen gepositioneerde bovenliggende element. Dit bericht heeft de CSS absolute positionering uitgelegd met een praktisch voorbeeld.