CSS Positioneren

De CSS Positionering (Positioning) eigenschappen laten je toe om elementen te positioneren.

CSS Positioneren en Float

CSS biedt enkele eigenschappen voor positioneren en float, met behulp waarvan je een kolombreedte-indeling kunt opzetten, een deel van de indeling met een ander deel overlappen, en ook taken kunnen voltooien die in de loop van de jaren meestal meerdere tabellen vereisten.

Het basisprincipe van positioneren is eenvoudig, het laat je toe om de positie van een elementkader te definiëren ten opzichte van zijn normale positie, of ten opzichte van de ouder-element, een ander element of zelfs het browservenster zelf. Het is duidelijk dat deze functie zeer krachtig is en ook zeer verrassend. Het moet geen verrassing zijn dat de gebruikersagent de ondersteuning voor positioneren in CSS2 veel beter biedt dan voor andere aspecten.

Anderzijds, introduceerde CSS1 voor het eerst de float, gebaseerd op een functie die Netscape toevoegde in de beginjaren van de webontwikkeling. Float is niet volledig positioneel, maar het is ook niet de normale stroomindeling. We zullen in latere hoofdstukken duidelijk maken wat float betekent.

Alles is een balk

Elementen zoals div, h1 of p worden vaak blokkastelelementen genoemd. Dit betekent dat deze elementen worden weergegeven alsEen stuk inhoudgenaamd 'blokbalk'. Het tegenovergestelde hiervan zijn elementen zoals span en strong, die 'inline-elementen' worden genoemd omdat hun inhoud wordt weergegeven in een regel, dat wil zeggen 'inlinebalk'.

Je kunt Display-eigenschapVerander het type gegenereerde balk. Dit betekent dat je een inline-element (bijvoorbeeld <a>-element) kunt laten gedragen als een blokkastelelement door de display-eigenschap in te stellen op block. Je kunt ook de display instellen op none, zodat de gegenereerde elementen geen balk hebben. In dat geval worden de balk en al zijn inhoud niet meer weergegeven en neemt ze geen ruimte in in het document.

Maar in een situatie wordt een blokkastelelement echter gecreëerd, zelfs zonder expliciet te zijn gedefinieerd. Dit gebeurt wanneer tekst wordt toegevoegd aan het begin van een blokkastelelement (bijvoorbeeld div). Zelfs als deze tekst niet wordt gedefinieerd als een alinea, wordt hij toch als een alinea behandeld:

<div>
tekst
<p>Meer tekst.</p>
</div>

In dit geval wordt deze balk genoemd naamloze blokbalk, omdat hij niet is geassocieerd met specifiek gedefinieerde elementen.

De tekstregels van blokkastelelementen ondergaan een soortgelijk proces. Stel dat er een alinea is met drie regels tekst. Elke regel tekst vormt een naamloze balk. Het is niet mogelijk om stijlen toe te passen op naamloze blokken of regelbalken, omdat er geen plek is waar stijlen kunnen worden toegepast (let op, regelbalk en inlinebalk zijn twee verschillende concepten). Dit helpt echter om te begrijpen dat alles wat we op het scherm zien, een soort Balk vormt.

CSS positie-mechanismen

CSS heeft drie basis positie-mechanismen: normale stroom, float en absolute positie.

Tenzij specifiek wordt aangegeven, worden alle blokken in de normale stroom geplaatst. Dit betekent dat de positie van elementen in de normale stroom wordt bepaald door hun positie in (X)HTML.

Blokkastelelementen worden van boven naar beneden opgeschaald, en de verticale afstand tussen de blokken wordt berekend op basis van de verticale buitenmarges van de blokken.

Inlinebalken worden horizontaal geplaatst in een regel. Het is mogelijk om de afstand tussen hen aan te passen met behulp van horizontale inspringing, randen en marges. Echter, verticale inspringing, randen en marges hebben geen invloed op de hoogte van de inlinebalk. Een horizontale balk gevormd door een regel wordt genoemdRegelbalk (Line Box)De hoogte van de regelbalk is altijd voldoende om alle ingesloten regelbalken te bevatten. Echter, het instellen van de regelhoogte kan de hoogte van deze balk verhogen.

In de volgende hoofdstukken zullen we u gedetailleerd uitleggen over relatieve positie, absolute positie en float.

CSS position Eigenschap

Door gebruik te maken van Position-eigenschapWe kunnen kiezen uit vier verschillende soorten positie, wat de manier waarop de elementenbalk wordt gegenereerd beïnvloedt.

Betekenis van de waarde van de position-eigenschap:

static
De elementenbalk wordt normaal gegenereerd. Blokkastelelementen genereren een rechthoekige balk als onderdeel van de documentstroom, en inline-elementen zullen een of meerdere regelbalken creëren die in de ouderbalk worden geplaatst.
relative
Het elementenframe verschuift een bepaalde afstand. Het behoudt zijn vorm voordat het gepositioneerd wordt en behoudt de ruimte die het oorspronkelijk inneemt.
absolute
Het elementenframe wordt volledig verwijderd uit de documentstroom en wordt gepositioneerd ten opzichte van zijn inheemse blok. Het inheemse blok kan een ander element in het document zijn of de initiële inheemse blok. De ruimte die het element oorspronkelijk inneemt in de normale documentstroom wordt gesloten, net alsof het element oorspronkelijk niet bestond. Na het positioneren wordt een blokkast gegenereerd, ongeacht het type frame dat het oorspronkelijk in de normale stroom genereerde.
fixed
De uitvoering van een elementenframe lijkt op het instellen van position: absolute, maar zijn inheemse blok is de venster itself.

Tip:Relatieve positionering wordt eigenlijk gezien als een onderdeel van het standaard stroompositioneringsmodel, omdat de positie van het element ten opzichte van zijn positie in de standaardstroom staat.

Voorbeeld

Positioneren: Relatieve positionering
Dit voorbeeld demonstreert hoe je een element positioneert relativeerend aan de normale positie van een element.
Positioneren: Absoluut positioneren
Dit voorbeeld demonstreert hoe je een element kunt positioneren met absolute waarden.
Positioneren: Vaste positionering
Dit voorbeeld demonstreert hoe je een element relativeerend aan het browservenster kunt positioneren.
Gebruik van een vaste waarde om de bovenste rand van een afbeelding in te stellen
Dit voorbeeld demonstreert hoe je de bovenste rand van een afbeelding kunt instellen met een vaste waarde.
Gebruik van percentages om de bovenste rand van een afbeelding in te stellen
Dit voorbeeld demonstreert hoe je de bovenste rand van een afbeelding kunt instellen met percentages.
Gebruik van een pixelwaarde om de onderste rand van een afbeelding in te stellen
Dit voorbeeld demonstreert hoe je de onderste rand van een afbeelding kunt instellen met een pixelwaarde.
Gebruik van percentages om de onderste rand van een afbeelding in te stellen
Dit voorbeeld demonstreert hoe je de onderste rand van een afbeelding kunt instellen met percentages.
Gebruik van een vaste waarde om de linker rand van een afbeelding in te stellen
Dit voorbeeld demonstreert hoe je de linker rand van een afbeelding kunt instellen met een vaste waarde.
Gebruik van percentages om de linker rand van een afbeelding in te stellen
Dit voorbeeld demonstreert hoe je de linker rand van een afbeelding kunt instellen met percentages.
Gebruik van een vaste waarde om de rechter rand van een afbeelding in te stellen
Dit voorbeeld demonstreert hoe je de rechter rand van een afbeelding kunt instellen met een vaste waarde.
Gebruik van percentages om de rechter rand van een afbeelding in te stellen
Dit voorbeeld demonstreert hoe je de rechter rand van een afbeelding kunt instellen met percentages.
Hoe je een scrollbar kunt gebruiken om overloopinhoud in een element weer te geven
Dit voorbeeld demonstreert hoe je de property overflow kunt instellen om de actie te regelen wanneer de inhoud van een element te groot is en de opgegeven regio overschrijdt.
Hoe je overloopinhoud in overloop-elementen kunt verbergen
Dit voorbeeld demonstreert hoe je de property overflow kunt instellen om de inhoud te verbergen wanneer de inhoud van een element te groot is om in het opgegeven gebied te passen.
Hoe je de browser kunt instellen om automatisch overloop te verwerken
Hoe je de browser kunt instellen om automatisch overloop te verwerken.
Vorm instellen van elementen
Dit voorbeeld demonstreert hoe je de vorm van een element kunt instellen. Dit element wordt ingesneden in deze vorm en wordt weergegeven.
Verticale opslag van afbeeldingen
Dit voorbeeld demonstreert hoe je een afbeelding verticaal in een tekst kunt plaatsen.
Z-index
Z-index kan worden gebruikt om een element achter een ander element te plaatsen.
Z-index
De elementen in de bovenstaande voorbeelden hebben de Z-index gewijzigd.

CSS Positie Eigenschappen

CSS Positie Eigenschappen stellen je in staat om elementen te positioneren.

Eigenschap Beschrijving
position Plaats het element in een statische, relatieve, absoluut of vaste positie.
top Definieert de offset tussen de bovenbuitenrand van het geplaatste element en de bovenbuitenrand van de inhoudscontainer.
right Definieert de offset tussen de rechterbuitenrand van het geplaatste element en de rechterbuitenrand van de inhoudscontainer.
bottom Definieert de offset tussen de onderbuitenrand van het geplaatste element en de onderbuitenrand van de inhoudscontainer.
left Definieert de offset tussen de linkerbuitenrand van het geplaatste element en de linkerbuitenrand van de inhoudscontainer.
overflow Stel in wat er gebeurt wanneer de inhoud van het element de gebiedsomschrijving overschrijdt.
clip Stel de vorm van het element in. Het element wordt ingesneden in deze vorm en wordt vervolgens weergegeven.
vertical-align Stel de verticale uitlijning van het element in.
z-index Stel de stapelingvolgorde van het element in.