De positioneringskenmerken van CSS worden voornamelijk gebruikt om lagen te maken met de tag, maar u kunt ze ook gebruiken om de positie van een afbeelding, container of blokniveau-element in te stellen binnen de browser. Voor lagen kunnen zowel de inhoud als de container worden gestyled met attributen in deze categorie.
-positie: bepaalt hoe een opgemaakt element in een browservenster moet worden geplaatst. Geef op of de positie absoluut, vast, relatief of statisch is.
#footer {position: relative;}
Gebruik een van de volgende stijlwaarden bij het instellen van de positie:
-
absolute: stelt de positie van het element absoluut in op basis van de numerieke waarden die zijn ingevoerd voor de plaatsing van het element ten opzichte van de linkerbovenrand van het browservenster, of tot het dichtstbijzijnde absoluut of relatief gepositioneerde bovenliggende element.
-
fixed: stelt de positie van het element absoluut in op basis van de numerieke waarden die zijn ingevoerd voor de plaatsing van het element ten opzichte van de linkerbovenrand van het browservenster.
-
relative: stelt de positie van het element in op basis van de numerieke waarden die zijn ingevoerd voor de positie van het object ten opzichte van de positie van het opgemaakte element in de tekstflow van het bestand.
-
static: stelt het element in op een exacte locatie binnen de tekstflow.
breedte: gebruik dit kenmerk om de breedte van een element in te stellen, zoals een laag of een andere container, met behulp van px, pt, in, cm, mm, pc, em, ex,% of auto.
# laag1 {breedte: 760px;}
hoogte: gebruik dit kenmerk om de hoogte van een element in te stellen, zoals een laag, met behulp van px, pt, in, cm, mm, pc, em, ex,% of automatisch.
# layer1 {height: 100px;}
visibility: dit kenmerk bepaalt de initiële zichtbaarheidswaarde van een element, dat kan worden ingesteld als verborgen, overerfd of zichtbaar wanneer de pagina voor het eerst wordt geopend in een browservenster.
# layer1 {visibility: hidden;}
Zichtbaarheid moet niet worden verward met het weergaveattribuut, dat bepaalt of een element moet worden behandeld als een blok of een inline-element of volledig moet worden genegeerd door de browser met het display: geen; attribuut. Met zichtbaarheid hebt u te maken met de aanvankelijke zichtbaarheidsstatus van een element, zoals een laag, wanneer de pagina voor het eerst wordt geladen in de browser.
Dit kenmerk kan ook worden in- en uitgeschakeld door JavaScript te gebruiken om elementen op de pagina te verbergen en weer te geven, waardoor de bezoeker een beetje interactiviteit krijgt.
Als u de zichtbaarheid van uw element wilt wijzigen, voegt u de zichtbaarheidseigenschap aan uw CSS-selector toe met een van de volgende waarden:
-
verborgen: met deze optie verbergt u een laag die wordt weergegeven wanneer een pagina in eerste instantie in een browser wordt geopend.
-
erven: deze optie zorgt ervoor dat elke laag de zichtbaarheid van een bovenliggende laag overneemt; als een ouder niet bestaat, is de laag zichtbaar. Wanneer de zichtbaarheid niet is opgegeven, is overerving het standaardkenmerk.
-
zichtbaar: kies deze optie om de laag zichtbaar te maken, ongeacht de zichtbaarheidsinstelling van een bovenliggende laag, wanneer de pagina voor het eerst wordt geopend in een browservenster.
z-index: dit kenmerk geeft de stapelvolgorde van een laag aan ten opzichte van andere lagen op de pagina zoals deze in een browser worden bekeken.
Stel de z-index in op automatisch als het aantal niet-kritiek is, stel het in om te erven zodat de laag de z-indexwaarde van een bovenliggende laag overerft, of voer een specifiek positief of negatief getal in, zoals 1, 15 of 100, wanneer het aantal belangrijk is ten opzichte van de andere lagen op de pagina.
Hoe hoger het cijfer, hoe dichter de laag aan de voorzijde of bovenkant van de pagina wordt weergegeven die zich het dichtst bij de bezoeker bevindt; hoe lager het getal, hoe dichter de laag wordt weergegeven in de achtergrond van de browser.
#lastchance {z-index: 4;}
De afbeelding toont een voorbeeld van verschillende lagen op een pagina met verschillende z-indexwaarden.
overloop: de overloopinstelling kan worden gebruikt om op te geven wat er met inhoud in een laag gebeurt die de grootte van de laag overschrijdt zoals gedefinieerd in de CSS. Als een laag bijvoorbeeld 200 px bij 200 px is, maar een volledige pagina tekst bevat, bepaalt de overloopinstelling hoe de tekst de laag zal vullen. Stel het overloopattribuut in op automatisch, verborgen, scrollen of zichtbaar.
#aboutus {overflow: scroll;}
Hier volgt een beschrijving van elk van de overloopwaarden die u kunt gebruiken:
-
auto: kies deze optie om de browser automatisch schuifbalken aan de laag toe te voegen als de inhoud de gedefinieerde breedte en hoogte van de laag overschrijdt.
-
verborgen: wanneer deze optie is geselecteerd, wordt de grootte van een laag behouden en wordt inhoud die die grootte overschrijdt, in een browservenster uitgesneden of uit beeld gesneden.
-
scrollen: kies scrollen om schuifbalken aan de laag toe te voegen, ongeacht of de inhoud binnen de breedte en hoogte van de laag past of deze overschrijdt. Dit kenmerk wordt niet uniform ondersteund door alle browsers, dus zorg ervoor dat u het test voordat u het publiceert.
-
zichtbaar: kies deze optie om de laag verticaal uit te breiden en vervolgens horizontaal, indien nodig, zodat deze past op elke inhoud die de opgegeven laagbreedte en -hoogte overschrijdt, zodat alle inhoud zichtbaar is.
Plaatsing (links, boven, rechts, onder): gebruik het plaatsingkenmerk om de exacte grootte en locatie (op basis van het opgegeven type) van een opgemaakt element in een browservenster op te geven.
Standaard worden de pixelgrootte en plaatsing van een element opgegeven voor de boven-, linker-, onder- en rechterrand. U kunt desgewenst echter andere eenheden (inclusief pt, in, cm, mm, pc, em, ex of%) gebruiken of de waarde voor een van de zijden instellen op automatisch. Voor lagen geldt dat als de inhoud van die laag de opgegeven grootte overschrijdt, de laag wordt uitgevouwen zodat deze in de inhoud past.
#specialitems {left: 500px; top: 300px; rechts: 0; onder: 0;}
clip: gebruik dit kenmerk om een kleiner zichtbaar rechthoekig gebied op te geven binnen een laag ten opzichte van de linkerbovenrand van die laag.Bij knippen kan het verborgen gebied worden gemanipuleerd met JavaScript of andere programmering om speciale effecten te creëren die de verborgen inhoud kunnen verbergen en tonen.
Stel waarden voor het afgekapte gebied in op de boven-, linker-, rechter- en onderrand van de laag met behulp van px (pixels), pc (picas), pt (punten), inch (inches), mm (millimeter), cm (centimeters), em (ems), ex (ex), of% (percentage), of een waarde van auto.
#bunnygame {clip: rect (10px, 100px, 0px, 60px);}
