CSS-positionering is lange tijd een belangrijk onderdeel geweest van het maken van websitelay-outs. Zelfs met de opkomst van CSS-lay-outtechnieken zoals Flexbox en CSS Grid, heeft positionering nog steeds een belangrijke plaats in de truc van een webontwerper.
Wanneer u CSS-positionering gebruikt, moet u eerst de CSS-eigenschap voor positie bepalen om de browser te laten weten of u absolute of relatieve positionering voor een bepaald element gaat gebruiken. U moet ook het verschil begrijpen tussen deze twee positioneringseigenschappen.
Hoewel absoluut en relatief de twee CSS-positie-eigenschappen zijn die het vaakst worden gebruikt in webontwerp, zijn er feitelijk vier toestanden aan de eigenschap position:
- statisch
- absoluut
- familielid
- vast
Statische positionering
Statisch is de standaardpositie voor elk element op een webpagina. Als u de positie van een element niet definieert, is het statisch, wat betekent dat het op het scherm wordt weergegeven op basis van waar het zich in het HTML-document bevindt en hoe het binnen de normale stroom van dat document wordt weergegeven.
Als u positieregels toepast zoals top of links voor een element met een statische positie, worden die regels genegeerd en blijft het element waar het wordt weergegeven in de normale documentstroom. U moet zelden of nooit een element instellen op een statische positie in CSS, omdat dit de standaardwaarde is.
Absolute CSS-positionering
Absolute positionering is waarschijnlijk de gemakkelijkste CSS-positie om te begrijpen. U begint met deze CSS-positie-eigenschap:
positie: absoluut;
Deze waarde vertelt de browser dat alles wat wordt gepositioneerd, moet worden verwijderd uit de normale stroom van het document en in plaats daarvan op een exacte locatie op de pagina moet worden geplaatst. Dit wordt berekend op basis van de dichtstbijzijnde niet-statisch geplaatste voorouder van dat element. Omdat een absoluut gepositioneerd element uit de normale stroom van het document wordt gehaald, heeft het invloed op hoe de elementen ervoor of erna in de HTML op de webpagina worden geplaatst. Als u bijvoorbeeld een divisie hebt die is gepositioneerd met een relatieve waarde binnen die divisie, hebt u een alinea waarvan u 50 pixels boven aan de divisie wilt positioneren, u voegt een positiewaarde toe van absoluut naar die alinea, samen met een offsetwaarde van 50px op de top eigendom, zoals dit: positie: absoluut;top: 50px;
Dit absoluut gepositioneerde element geeft altijd 50 pixels weer vanaf de bovenkant van die relatief gepositioneerde divisie, ongeacht wat er verder in de normale flow wordt weergegeven. Uw absoluut gepositioneerde element gebruikt de relatief gepositioneerde als de context en de positioneringswaarde die u gebruikt, is relatief ten opzichte van die. De vier positioneringseigenschappen die u beschikbaar hebt, zijn: Je kunt een van beide gebruiken top of bodem - omdat een element niet kan worden gepositioneerd volgens deze beide waarden - en geen van beide rechts of links. Als een element is ingesteld op een absolute positie, maar het heeft geen niet-statisch geplaatste voorouders, dan wordt het geplaatst ten opzichte van het body-element, het element op het hoogste niveau van de pagina. Relatieve positionering gebruikt dezelfde vier positioneringseigenschappen als absolute positionering, maar in plaats van de positie van het element te baseren op de dichtstbijzijnde niet-statisch gepositioneerde voorloper, begint het van waar het element zou zijn als het zich nog in de normale stroom zou bevinden. Als u bijvoorbeeld drie alinea's op uw webpagina heeft en de derde heeft een alinea positie: relatief stijl geplaatst, de positie wordt gecompenseerd op basis van de huidige locatie. Paragraaf 1. Lid 2. Lid 3. In het bovenstaande voorbeeld staat de derde alinea 2em vanaf de linkerkant van het containerelement maar nog steeds onder de eerste twee alinea's. Het blijft in de normale stroom van het document en is iets verschoven. Als u dit wijzigt in positie: absoluut, alles wat daarop volgt wordt er bovenop weergegeven omdat het niet meer in de normale stroom van het document is. Elementen op een webpagina worden vaak gebruikt om een waarde in te stellen positie: relatief zonder vastgestelde offsetwaarde, wat betekent dat het element precies blijft waar het zou verschijnen in normale flow. Dit wordt alleen gedaan om dat element vast te stellen als een context waartegen andere elementen absoluut kunnen worden gepositioneerd. Als u bijvoorbeeld een divisie heeft die uw volledige website omringt met een klassenwaarde van houder, wat een veelvoorkomend scenario is in webontwerp, kan die divisie worden ingesteld op een positie van familielid zodat alles erin kan worden gebruikt als positioneringscontext. Vaste positionering lijkt veel op absolute positionering. De positie van het element wordt op dezelfde manier berekend als het absolute model, maar vaste elementen worden dan op die locatie gefixeerd - bijna als een watermerk. Al het andere op de pagina scrolt vervolgens voorbij dat element. Als u deze eigenschapswaarde wilt gebruiken, stelt u het volgende in: positie: vast;
Houd er rekening mee dat wanneer u een element op zijn plaats op uw site ophaalt, het op die locatie wordt afgedrukt wanneer uw webpagina wordt afgedrukt. Als uw element bijvoorbeeld boven aan uw pagina is vastgesteld, wordt het boven aan elke afgedrukte pagina weergegeven omdat het boven aan de pagina is vastgesteld. U kunt mediatypen gebruiken om te wijzigen hoe de afgedrukte pagina's vaste elementen weergeven: @media-scherm { h1 # eerste {positie: vast; } } @media print { h1 # eerste {positie: statisch; } }
Relatieve positionering
Hoe zit het met vaste positionering?
