CSS3-positionering. Absolute positionering in CSS

Laatste update: 28/04/2016

CSS biedt mogelijkheden voor elementpositionering, wat betekent dat we een element op een specifieke locatie op de pagina kunnen plaatsen

De belangrijkste eigenschap die de positionering in CSS regelt, is de eigenschap position. Deze eigenschap kan een van de volgende waarden aannemen:

statisch: standaard elementpositionering, standaardwaarde

absoluut: het element wordt gepositioneerd ten opzichte van de grenzen van het containerelement als de position-eigenschap niet statisch is

relatief: het element wordt relatief ten opzichte van de standaardpositie gepositioneerd. Het belangrijkste doel van relatieve positionering is doorgaans niet het verplaatsen van een element, maar het positioneren ervan nieuw punt bindingen voor absolute positionering van geneste elementen

vast: het element wordt relatief ten opzichte van het browservenster gepositioneerd, hierdoor kunt u vaste elementen maken die niet van positie veranderen wanneer u bladert

Mag niet tegelijkertijd op een element worden toegepast zwevend eigendom en elk ander positioneringstype dan statisch (dat wil zeggen het standaardtype).

Het weergavegebied van de browser heeft een boven-, onder-, rechter- en linkerrand. Elk van deze vier randen heeft een overeenkomstige CSS-eigenschap: links, rechts, boven en onder. De waarden voor deze eigenschappen worden gespecificeerd in pixels, ems of percentages. Het is niet nodig om voor alle vier de zijden waarden in te stellen. In de regel worden er slechts twee waarden ingesteld: de inspringing vanaf de bovenrand bovenaan en de inspringing vanaf de linkerrand links.

Blokindeling in HTML5 .header (positie: absoluut; links: 100px; boven: 50px; breedte: 430px; hoogte: 100px; achtergrondkleur: rgba(128, 0, 0, 0.5); )

HALLO WERELD

Hier zal de absoluut gepositioneerde div 100 pixels links van de viewportrand en 50 pixels vanaf de onderkant zijn.

Het is niet zo belangrijk dat hierna div-element er komen nog enkele andere elementen. Dit blok De div wordt in ieder geval gepositioneerd ten opzichte van de grenzen van de browserviewport.

Als een element met absolute positionering zich in een andere container bevindt, die op zijn beurt een position-eigenschapswaarde heeft die niet gelijk is aan static , dan wordt het element gepositioneerd ten opzichte van de grenzen van de container:

Positionering in HTML5 .outer ( positie: absoluut; links: 80px; boven: 40px; breedte: 430px; hoogte: 100px; rand: 1px effen #ccc; ) .inner( positie: absoluut; links: 80px; boven: 40px; breedte : 50px; hoogte: 50px; achtergrondkleur: rgba(128, 0, 0, 0,5);

De relatieve positionering wordt ook gespecificeerd met behulp van de relatieve waarde. Om de specifieke positie te specificeren waarnaar het element wordt verschoven, worden dezelfde eigenschappen boven, links, rechts en onder gebruikt:

Positionering in HTML5 .outer ( positie: relatief; links: 80px; boven: 40px; breedte: 300px; hoogte: 100px; rand: 1px effen #ccc; ) .inner( positie: absoluut; links: 80px; boven: 40px; breedte : 50px; hoogte: 50px; achtergrondkleur: rgba(128, 0, 0, 0,5);

Als twee randelementen overeenkomen, wordt standaard het element gedefinieerd in html-opmaak de laatste. Met de eigenschap z-index kunt u echter de volgorde van elementen wijzigen wanneer ze over elkaar heen liggen. De eigenschap heeft een getal als waarde. Elementen met een grotere z-indexwaarde verschijnen bovenop elementen met een kleinere z-indexwaarde.

Bijvoorbeeld:

Positionering in HTML5 body( marge:0; opvulling:0; ) .content( positie: relatief; boven: 15px; links: 20px; breedte: 250px; hoogte: 180px; achtergrondkleur: #eee; rand: 1px effen #ccc ) .redBlock( positie: absoluut; boven: 20px; links:50px; breedte: 80px; hoogte: 80px; achtergrondkleur: rood; ) .blueBlock( positie: absoluut; boven: 80px; links: 80px; breedte: 80px hoogte: 80px; achtergrondkleur: blauw;

Laten we nu een nieuwe regel toevoegen aan de redBlock-blokstijl:

RedBlock( z-index: 100; positie: absoluut; boven: 20px; links:50px; breedte: 80px; hoogte: 80px; achtergrondkleur: rood; )

Hier is de z-index 100. Maar dit hoeft niet het getal 100 te zijn. Omdat het tweede blok een ongedefinieerde z-index heeft en feitelijk nul is, kunnen we voor redBlock de eigenschap z-index instellen op elke waarde groter dan nul.

En nu overlapt het eerste blok het tweede, en niet andersom, zoals in het begin het geval was.

Vlad Merzjevitsj

Positionering is de positie van een element in een coördinatensysteem. Er zijn vier soorten positionering: normaal, absoluut, vast en relatief. Afhankelijk van het type, dat via de positie-eigenschap wordt ingesteld, verandert ook het coördinatensysteem.

Dankzij de combinatie van de eigenschappen position , left , top , right en bottom kan een element over elkaar heen worden gelegd, op een punt met bepaalde coördinaten worden weergegeven, op een bepaalde locatie worden vastgelegd, de positie van het ene element ten opzichte van het andere worden bepaald, etc. Vergelijkbaar met andere eigenschappen CSS-beheer positionering is beschikbaar via scripts. Zo kunt u de positie van elementen dynamisch wijzigen zonder de pagina opnieuw te laden, waardoor animaties en verschillende effecten ontstaan.

Als de position-eigenschap van een element niet is ingesteld of de waarde ervan statisch is, wordt het element zoals normaal weergegeven in de documentstroom. Met andere woorden: elementen verschijnen op de pagina in de volgorde waarin ze in de HTML-broncode verschijnen.

De eigenschappen left , top , right en bottom, indien gedefinieerd, worden genegeerd.

Bij absolute positionering bestaat het element niet in de documentstroom en wordt de positie ervan ingesteld ten opzichte van de randen van de browser. U kunt dit type instellen via de absolute waarde van de eigenschap position. De coördinaten worden gespecificeerd ten opzichte van de randen van het browservenster, het “zichtbare gebied” genoemd (Fig. 3.42).

Rijst. 3.42. Eigenschapswaarden links, rechts, boven en onder voor absolute positionering

De modus wordt gekenmerkt door de volgende kenmerken.

• De breedte van de laag is, tenzij expliciet gespecificeerd, gelijk aan de breedte van de inhoud plus de waarden voor marge, rand en opvulling.
• De laag verandert niets uitgangspositie als het niet de eigenschappen right , left , top en bottom heeft.
• De eigenschappen links en bovenaan hebben voorrang op de eigenschappen rechts en onderaan. Als links en rechts elkaar tegenspreken, wordt de waarde van rechts genegeerd. Hetzelfde geldt voor de onderkant.
• Als left op een negatieve waarde is ingesteld, zal de laag voorbij de linkerrand van de browser gaan en zal de schuifbalk niet verschijnen. Dit is een manier om een ​​element aan het zicht te onttrekken. Hetzelfde geldt voor de eigenschap top, alleen de laag komt voorbij de bovenrand.
• Indien links, stelt u de waarde in meer breedte zichtbaar gebied of specificeer rechts met een negatieve waarde, de horizontale streep rol. Een soortgelijke regel werkt met top , alleen zullen we het hebben over een verticale schuifbalk.
• Tegelijkertijd vormen de opgegeven linker- en rechtereigenschappen de breedte van de laag, maar alleen als de breedte niet is opgegeven. Nadat u de eigenschap width heeft toegevoegd, wordt de juiste waarde genegeerd. Hetzelfde zal gebeuren met de hoogte van de laag, alleen de eigenschappen top , bottom en height zijn betrokken.
• Een absoluut gepositioneerd element beweegt met het document mee terwijl u scrolt.

De eigenschap position, ingesteld op absoluut, kan worden gebruikt om een ​​frame-effect te creëren. Naast de absolute positionering moeten elementen een overflow-eigenschap hebben die is ingesteld op auto . Wanneer de inhoud vervolgens de hoogte van het zichtbare gebied overschrijdt, verschijnt er een schuifbalk. De hoogte en breedte van de “frames” worden automatisch gegenereerd door gelijktijdig gebruik eigenschappen left , right voor breedte en top , bottom voor hoogte (voorbeeld 3.31).

Voorbeeld 3.31. Een analoog van frames maken

Absolute positionering body ( marge: 0; ) #sidebar, #content ( position: absoluut; ) #sidebar, #content ( overflow: auto; opvulling: 10px; ) #header ( hoogte: 80px; /* Laaghoogte */ achtergrond: #FEDFC0; rand-onder: 2px effen #7B5427 ) #header h1 (opvulling: 20px; marge: 0; ) #zijbalk ( breedte: 150px; achtergrond: #ECF5E4; rand-rechts: 1px effen #231F20; boven: 82px ; /* Afstand vanaf de bovenrand */ onder: 0; /* Afstand vanaf de onderkant */ ) #content ( boven: 82px; /* Afstand vanaf de bovenrand */ links: 170px; /* Afstand vanaf de linkerrand */ onder: 0; rechts: 0;) Pilaf van de volkeren van de wereld

Pilaf in Fergana-stijl

Oezbeekse pilaf

Siberische pilaf

Italiaanse pilaf

Estse pilaf

Pilaf in Amerikaanse stijl

Pilaf in Indiase stijl

Doe het in stukjes gesneden vlees in een ketel en bak het tot er een korst ontstaat. Fruit de ui, in ringen gesneden, samen met het vlees tot ze roodachtig is, voeg dan de wortels toe, in reepjes gesneden. Voeg de helft van het zout toe, meng alles en bak tot de wortels goudbruin zijn. Giet daarna de helft van de benodigde hoeveelheid water en laat het koken.

Bedek de rijst in een gelijkmatige laag, zet het vuur hoger en giet er onmiddellijk water bij zodat het de rijst 1-1,5 cm bedekt. ​​Zodra het water is verdampt, verzamelt u de pilaf met een schuimspaan in een heuveltje naar het midden toe , prik het op verschillende plaatsen met een stok zodat het water aan de oppervlakte naar de bodem gaat. Dek de pilaf vervolgens af en laat hem 20-25 minuten rusten.

Meng de afgewerkte pilaf grondig, doe hem in een grote schaal en plaats het vlees erop.

Resultaat dit voorbeeld getoond in afb. 3.43. De koplaag wordt zoals gebruikelijk in de stream weergegeven en de zijbalk- en inhoudslagen zijn absoluut gepositioneerd.

Rijst. 3.43. Absolute positionering toepassen

In IE6 kunnen absoluut gepositioneerde elementen niet tegelijkertijd de eigenschappen left , right en top , bottom hebben.

Absolute positionering wordt ook gebruikt om verschillende effecten te creëren, zoals fototooltips. In tegenstelling tot titel attribuut label waarin ook de tooltiptekst wordt weergegeven, kunt u via stijlen bepalen welk type tekst wordt weergegeven met behulp van het script.

Laten we eerst creëren lege laag met de identificatie floatTip en definieer de stijl ervan. Er moeten drie stijleigenschappen vereist zijn: positie met een waarde van absolute , weergave met een waarde van none verbergt de laag, en breedte stelt de breedte van de laag in met tooltip. De overige eigenschappen worden op verzoek van de ontwikkelaar gebruikt en zijn bedoeld om het ontwerp van de laag te wijzigen (voorbeeld 3.32).

Voorbeeld 3.32. Tooltip-stijl

#floatTip ( positie: absoluut; /* Absolute positionering */ breedte: 250px; /* Blokbreedte */ weergave: geen; /* Verbergen van weergave */ rand: 1px effen #000; /* Frameparameters */ opvulling: 5px ; /* Marges rondom tekst */ lettertypefamilie: schreefloos; /* Geketend lettertype */ lettergrootte: 9pt /* Lettergrootte */ kleur: #333; /* Achtergrondkleur */ )

Het script zelf bestaat uit twee functies: moveTip() volgt de muisbeweging en verandert de positie van de laag in overeenstemming met de cursorcoördinaten, en toolTip() regelt de zichtbaarheid van de laag en geeft de gewenste tekst daarin weer (voorbeeld 3.33).

Voorbeeld 3.33. Uitvoerscript voor lagen

Document.onmousemove = moveTip; functie moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Laagbreedte // Voor IE-browser if (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Voor andere browsers ) else ( x = e.pageX; // X-coördinaat van de cursor y = e.pageY; // Y-coördinaat van de cursor ) // Toon de laag rechts van de cursor als ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

Voor het gemak en de veelzijdigheid moet het script in apart bestand en verbind deze via het src-attribuut van de tag. De uiteindelijke code wordt weergegeven in voorbeeld 3.34.

Voorbeeld 3.34. Een tooltip maken

Tooltip #floatTip (positie: absoluut; breedte: 250px; weergave: geen; rand: 1px effen #000; opvulling: 5px; lettertypefamilie: schreefloos; lettergrootte: 9pt; kleur: #333; achtergrond: # ECF5E4 ; dekking: 0,85; /* Laagtransparantie */ )

" + "Lens: Canon EF 24-105 f/4L IS USM
" + "Flitser: Canon Speedlite 580 EX
" + "Sluitertijd: 1/125
Diafragma: 5,6")" onmouseout="toolTip()" />

Het resultaat van dit voorbeeld wordt getoond in Fig. 3.44. Houd er rekening mee dat tekstterugloop bij het aanroepen van de functie toolTip() bedoeld is voor leesbaarheidsdoeleinden en in JavaScript-syntaxis is. In Safari werkt het script soms niet bij het teruglopen van tekst, in dat geval moet de tekst op één regel worden geschreven. Er is een CSS3-dekkingseigenschap toegevoegd aan stijlen, die een lichte transparantie aan de laag toevoegt. Deze eigenschap wordt niet ondersteund in IE vóór versie 9.0.

Rijst. 3.44. Tooltip weergegeven met JavaScript

De vaste positie van een laag wordt gespecificeerd door de vaste waarde van de eigenschap position en is qua effect vergelijkbaar met absolute positionering. Maar anders dan dit, bindt het zich aan het punt op het scherm dat wordt gespecificeerd door de eigenschappen left , top , right en bottom en verandert het zijn positie niet tijdens het scrollen op de webpagina. Een ander verschil met absoluut is dat wanneer een vaste laag voorbij het zichtbare gebied rechts of eronder gaat, er geen schuifbalken verschijnen.

Dit type positionering wordt gebruikt om menu's, tabbladen, kopteksten en in het algemeen alle elementen te maken die op de pagina moeten worden vastgelegd en altijd zichtbaar moeten zijn voor de bezoeker. Voorbeeld 3.35 toont het toevoegen van een voettekst die op één plek blijft staan, ongeacht de hoeveelheid informatie op de site.

Voorbeeld 3.35. Vaste kelder

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Vaste voettekst BODY ( marge-onder: 50px; ) #footer ( positie: vast; /* Vaste positie */ links: 0; onder: 0; /* linkerbenedenhoek */ opvulling: 10px; /* Marges rond tekst */ achtergrond: #39b54a; /* Achtergrondkleur */ kleur: #fff; /* Tekstkleur */ breedte: 100%; /* Laagbreedte */ ) Alle leeuwenvangmethoden die op de site worden vermeld, zijn theoretisch en gebaseerd op computationele methoden. De auteur garandeert uw veiligheid bij het gebruik ervan niet en wijst alle verantwoordelijkheid voor de resultaten af.

Vergeet niet dat een leeuw een roofdier en een gevaarlijk dier is!

Vlad Merzjevitsj

Als u de eigenschap position op relatief zet, wordt de positie van het element relatief ten opzichte van de oorspronkelijke locatie ingesteld. Door de eigenschappen left , top , right en bottom toe te voegen, wordt de positie van het element gewijzigd en wordt het vanaf de oorspronkelijke locatie naar de ene of de andere kant verplaatst. Een positieve linkerwaarde specificeert een verschuiving naar rechts vanaf de linkerrand van het element, een negatieve waarde specificeert een verschuiving naar links. Een positieve waarde van top specificeert een neerwaartse verschuiving van het element (Fig. 3.46), een negatieve waarde specificeert een opwaartse verschuiving.

Rijst. 3.46. Linker- en bovenste eigenschapswaarden voor relatieve positionering

De onderste en rechter eigenschappen produceren omgekeerde werking. Bij een positieve waarde verschuift rechts het element naar links van de rechterrand, bij een negatieve waarde verschuift het naar rechts (Fig. 3.47). Een positieve bodemwaarde verplaatst het element naar boven, een negatieve bodemwaarde verplaatst het naar beneden.

Rijst. 3.47. Eigenschapswaarden rechts en onderaan voor relatieve positionering

Relatieve positionering wordt gekenmerkt door de volgende kenmerken.

• Dit type positionering is niet van toepassing op tabelelementen zoals cellen, rijen, kolommen, enz.
• Wanneer een element wordt verschoven ten opzichte van zijn oorspronkelijke positie, blijft de ruimte die het element inneemt leeg en wordt deze niet gevuld door de elementen eronder of erboven.

Voorbeeld 3.36 laat de koptekst naar beneden bewegen om deze een andere schrijfstijl te geven.

Voorbeeld 3.36. Tekst titel

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Kop H1 ( lettertype: vet 2em Arial, Tahome, sans-serif; /* Lettertype-opties */ kleur: #fff; achtergrond: #375D4C; opvulling: 0 10px; ) H1 SPAN ( positie: relatief; /* Relatieve positionering */ top: 0.3em; /* Naar beneden */ ) Az en beuken van lettertypewetenschap

Een lettertype is een middel om design uit te drukken, niet een soort banale lectuur.

Het resultaat van dit voorbeeld wordt getoond in Fig. 3.48.

Rijst. 3.48. Verplaats tekst ten opzichte van de oorspronkelijke positie

Meestal wordt relatieve positionering zelf niet vaak gebruikt, omdat er een aantal eigenschappen zijn die feitelijk dezelfde rol vervullen, bijvoorbeeld dezelfde marge. Maar de combinatie verschillende soorten Positionering voor geneste lagen is een van de handige en praktische lay-outtechnieken. Als u relatief instelt voor het bovenliggende element en absoluut voor het onderliggende element, verandert het coördinatensysteem en wordt de positie van het onderliggende element aangegeven ten opzichte van het bovenliggende element (Fig. 3.49).

Rijst. 3.49. Eigenschapswaarden links, rechts, boven en onder in geneste lagen

Coördinaten worden geteld vanaf binnenrand grenzen, er wordt geen rekening gehouden met veldwaarden. In het volgende voorbeeld wordt tekst in de rechterbenedenhoek van de laag, dichtbij de rand, geplaatst, waarbij de eigenschap opvulling wordt genegeerd.

Tekst



nepBbiu gepositioneerde tekst

Rijst. 666. Met behulp van de eigenschap i-index kunt u de natuurlijke volgorde van elementen in de tekst van een HTML-document wijzigen

Bij het positioneren van elementen kan het blijken dat de afmetingen van het element groter zijn dan de afmetingen van het fragment (het toegewezen gebied dat in ons voorbeeld door de tag wordt gespecificeerd).

• Tekst of een afbeelding passen bijvoorbeeld niet volledig in de daarvoor bestemde rechthoek. In dit geval is er de overwlow-eigenschap. De overflow-eigenschap kan drie waarden hebben:
• geen (niets) - als het element verder gaat dan het fragment (de ruimte die ervoor is toegewezen), wordt het nog steeds weergegeven;
• clip - delen van het element die buiten de grenzen van het fragment uitsteken, worden afgesneden;

scrollen - scrollen wordt gebruikt.

In het volgende voorbeeld wordt de eigenschap overflow gebruikt om een ​​schuifmechanisme voor de eerste tekst te maken.




Positionering

riepBbiM gepositioneerde tekst

Tweede geplaatste tekst Rijst. 667. Mechanisme tekst scrollen

, geïmplementeerd met behulp van de overflow-eigenschap

Natuurlijk zijn de lelijke pagina's uit de vorige tekeningen alleen gemaakt om het vermogen van de taal om elementen te positioneren te demonstreren.

U bepaalt zelf welke hulpmiddelen u op uw webpagina gebruikt en met welk doel. Met behulp van positioneringseigenschappen kunt u eenvoudig een driedimensionaal effect voor uw labels creëren. Het idee is om teksten met dezelfde inhoud enigszins verschoven ten opzichte van elkaar weer te geven en in verschillende kleuren te kleuren. Probeer een bijbehorend programma te schrijven als oefening.

Op de afbeelding is te zien wat er ongeveer zou moeten gebeuren. Onder de figuur staat een van de mogelijke versies van het programma dat een "driedimensionale" inscriptie creëert.

Rijst. 668. Een voorbeeld van het maken van 3D-tekst met
met behulp van CSS
3D-effect

P (lettertypefamilie: "sans-serif"; lettergrootte: 96, -kleur: rood)"

P. hoogtepunt (kleur: zilver)

P. schaduw (kleur: donkerrood)

Volumetrische tekst Volumetrische tekst Volumetrische tekst

Houd er rekening mee dat deze methode voor het maken van effectieve krantenkoppen veel zuiniger is dan het gebruik ervan

Er zijn verschillende soorten positionering in CSS, elk van deze typen heeft zijn eigen reikwijdte. In dit hoofdstuk gaan we er een aantal bekijken verschillende gevallen toepassingen - het creëren van herbruikbare lay-outs en unieke positionering van wegwerpelementen, evenals een beschrijving van verschillende methoden om dit te doen.

Eén manier om elementen op een pagina te positioneren is via de eigenschap float. Deze eigenschap is behoorlijk veelzijdig en kan op veel verschillende manieren worden gebruikt.

In wezen neemt de eigenschap float een element, verwijdert het uit de normale stroom van de pagina en positioneert het links of rechts van het bovenliggende element. Alle andere elementen op de pagina wikkelen zich rond zo'n element. Alinea's lopen bijvoorbeeld rond een afbeelding als het element float-eigenschap is ingesteld.

Wanneer de eigenschap float op meerdere elementen tegelijk wordt toegepast, wordt het mogelijk een lay-out te maken met zwevende elementen naast of tegenover elkaar, zoals weergegeven in een lay-out met meerdere kolommen.

De eigenschap float heeft verschillende waarden, waarvan de twee meest populaire links en rechts zijn, waardoor het element naar links of rechts van het bovenliggende element kan zweven.

Afb ( zweven: links; )

Laten we een algemene pagina-indeling maken met een koptekst bovenaan, twee kolommen in het midden en een voettekst onderaan. Idealiter zou deze pagina moeten worden gemarkeerd met de elementen , , en, zoals beschreven in Les 2, HTML begrijpen. Binnen een element kan de HTML er als volgt uitzien:

... ... ... ...

Hier zijn de elementen op blokniveau, dus standaard op elkaar gestapeld. Wij willen echter dat deze elementen naast elkaar staan. Door float naar links en rechts in te stellen om te zweven, kunnen we ze als twee kolommen tegenover elkaar positioneren. Onze CSS zou er als volgt uit moeten zien:

Sectie ( zweven: links; ) opzij ( zweven: rechts; )

Ter referentie: zwevende elementen worden langs de rand van het bovenliggende element geplaatst. Als er geen ouder is, wordt het zwevende element langs de rand van de pagina geplaatst.

Wanneer we een element zo instellen dat het zweeft, verwijderen we het uit de normale stroom van het HTML-document. Dit zorgt ervoor dat de standaardbreedte van dat element de breedte van de inhoud wordt. Soms, bijvoorbeeld wanneer we kolommen maken voor een herbruikbare lay-out, is dit gedrag ongewenst. Dit kan worden opgelost door een breedte-eigenschap toe te voegen met een vaste waarde voor elke kolom. Om te voorkomen dat zwevende elementen elkaar raken, waardoor de inhoud van het ene element naast het andere komt te staan, kunnen we bovendien de eigenschap margin gebruiken om de ruimte tussen de elementen in te stellen.

Hieronder breiden we het vorige codeblok uit door een marge en breedte voor elke kolom toe te voegen om ons gewenste resultaat beter vorm te geven.

Sectie ( zwevend: links; marge: 0 1,5%; breedte: 63%; ) opzij ( zwevend: rechts; marge: 0 1,5%; breedte: 30%; )

Voor een zwevend element is het ook belangrijk om te begrijpen dat het element uit de normale stroom van de pagina wordt verwijderd en dat de standaardweergavewaarde van het element kan veranderen. De eigenschap float is afhankelijk van de instelling van de weergavewaarde van het element op blok en kan de standaardweergavewaarde van het element wijzigen als deze nog niet als blokelement is weergegeven.

Een element waarvan de weergave is ingesteld op inline , zoals inline , negeert bijvoorbeeld alle height- of width-eigenschappen. Als u echter een float opgeeft voor een inline-element, verandert de weergavewaarde in blok en kan het element al de eigenschappen height of width aannemen.

Wanneer we een element zweven, moeten we voorzichtig zijn met de manier waarop dit de waarde van de weergave-eigenschap beïnvloedt.

Voor twee kolommen kun je float instellen, de ene kolom als links en de andere als rechts, maar voor meerdere kolommen zullen we onze aanpak moeten veranderen. Laten we bijvoorbeeld zeggen dat we een rij van drie kolommen willen hebben tussen onze elementen en . Als we ons element weggooien en drie elementen gebruiken, zou onze HTML er als volgt uit kunnen zien:

... ... ... ... ...

Om deze drie elementen in een rij van drie kolommen te rangschikken, moeten we de float van alle elementen op left zetten. We moeten ook de breedte aanpassen om rekening te houden met de extra kolommen en deze naast elkaar plaatsen.

Sectie ( zwevend: links; marge: 0 1,5%; breedte: 30%; )

Hier hebben we drie kolommen, allemaal met dezelfde breedte en margewaarde, en de float is ingesteld op left .

De float-eigenschap is oorspronkelijk ontworpen om inhoud rond afbeeldingen te laten stromen. Een afbeelding kan een float krijgen en alle inhoud rondom die afbeelding vloeit er op natuurlijke wijze omheen. Hoewel dit prima werkt voor afbeeldingen, was de eigenschap float niet echt bedoeld om te worden gebruikt voor lay-out- en positioneringsdoeleinden en brengt dus enkele valkuilen met zich mee.

Een van deze valkuilen is dat soms de juiste stijlen niet verschijnen op een element dat grenst aan of de ouder is van een zwevend element. Wanneer een element is ingesteld om te zweven, wordt het uit de normale stroom van de pagina verwijderd en als gevolg daarvan kunnen de stijlen van de elementen rond dat zwevende element negatief worden beïnvloed.

Vaak worden de waarden van de marge- en opvullingseigenschappen verkeerd geïnterpreteerd, waardoor ze opgaan in het zwevende element. Andere eigenschappen kunnen ook worden beïnvloed.

Een andere fout is dat soms verwerpelijke inhoud begint rond het vlotterelement te wikkelen. Door een element uit de stroom van het document te verwijderen, kunnen alle elementen rond het zwevende element dit omzeilen en alle beschikbare ruimte rondom het zwevende element innemen, wat vaak ongewenst is.

In ons vorige voorbeeld met twee kolommen, nadat we een float aan de elementen en hadden toegevoegd, maar voordat we de eigenschap width op een van beide hadden ingesteld, werd de inhoud in het element tussen de twee zwevende elementen erboven geplaatst, waardoor alle beschikbare ruimte werd opgevuld. . Bijgevolg zou het element zich in de opening tussen de elementen en bevinden en vrije ruimte innemen.

Om te voorkomen dat inhoud rond zwevende elementen loopt, moeten we de zwevende elementen wissen en de pagina terugbrengen naar de normale stroom. We zullen bekijken hoe u vlotters kunt verwijderen en vervolgens de inhoud ervan bekijken.

Het wissen van een float gebeurt met behulp van de clear-eigenschap, waarvoor meerdere nodig zijn verschillende betekenissen: De meest gebruikte waarden zijn links, rechts en beide.

Div ( duidelijk: links; )

De waarde links ruimt de linker floats op, terwijl de waarde rechts de rechter floats wist. De waarde beide zal echter de linker- en rechtervlotters wissen en is vaak de meest ideale optie.

Terugkerend naar ons vorige voorbeeld: als we de eigenschap clear gebruiken met de waarde van beide op een element, kunnen we de float wissen. Het is belangrijk dat clear wordt toegepast op het element dat is opgegeven na de zwevende elementen, en niet ervoor, om de pagina terug te brengen naar de normale flow.

Voettekst (duidelijk: beide; )

In plaats van de float op te heffen, is een andere optie om de inhoud op float te zetten. Het resultaat zal vrijwel hetzelfde zijn, maar de float-inhoud zorgt er echt voor dat al onze stijlen correct worden weergegeven.

Om zwevende inhoud in te stellen, moeten zwevende elementen zich binnen het bovenliggende element bevinden. Het zal fungeren als een container, waardoor de stroom van het document daarbuiten volkomen normaal blijft. De stijl voor dit bovenliggende element wordt weergegeven door een groepsklasse, zoals hier weergegeven:

Group::before, .group::after ( inhoud: ""; weergave: tabel; ) .group::after ( clear: beide; ) .group ( clear: beide; *zoom: 1; )

Er gebeurt hier niet veel, maar het enige dat CSS doet, is alle zwevende elementen binnen het groepselement wissen en het document terugbrengen naar de normale stroom.

Meer specifiek genereren de ::before en ::after pseudo-elementen, zoals besproken in Les 4, dynamisch elementen boven en onder een element met class group . Deze elementen bevatten geen inhoud en worden weergegeven als tabelelementen, vergelijkbaar met blokelementen. Een dynamisch gegenereerd element nadat een groepselement de vlotter binnen het groepselement wist, net zoals clear voorheen deed. Ten slotte verwijdert het groepselement ook eventuele floats die ervoor verschijnen als er een float is met de waarde left of right . Hier ook opgenomen kleine truc, waardoor oudere browsers prachtig spelen.

Er is hier meer code dan alleen het clear: beide commando, maar het kan behoorlijk handig zijn.

Gezien onze pagina-indeling met twee kolommen, zouden we het bovenliggende element ook kunnen omsluiten. Dit bovenliggende element bevat zwevende elementen. De code ziet er als volgt uit:

... ... ... ...

Group::before, .group::after ( inhoud: ""; weergave: tabel; ) .group::after ( clear: beide; ) .group ( clear: beide; *zoom: 1; ) sectie ( float: left ; marge: 0 1,5%; breedte: 63% ) opzij ( zwevend: rechts; marge: 0 1,5%; breedte: 30%; )

De hier getoonde techniek staat bekend als "clearfix" en wordt vaak gezien op andere sites met de klassenaam clearfix of cf. We hebben ervoor gekozen om de klassenaamgroep te gebruiken omdat deze een groep elementen vertegenwoordigt en de inhoud beter tot uitdrukking brengt.

Wanneer elementen zijn ingesteld om te zweven, is het belangrijk om te monitoren hoe ze de paginastroom beïnvloeden en ervoor te zorgen dat de paginastroom wordt gereset door middel van het wissen of via zwevende inhoud zoals bedoeld. Anders kan het bijhouden van floats veel kopzorgen veroorzaken, vooral op pagina's die meerdere rijen bevatten, elk met meerdere kolommen.

Laten we teruggaan naar de Styles Conference-site en proberen floats aan bepaalde inhoud toe te voegen.

/* ============================================== ====== Clearfix ======= ================================== * / .group::before, .group::after ( inhoud: " "; weergave: tabel; ) .group::after ( clear: beide; ) .group ( clear: beide; *zoom: 1; )

Nu we een float kunnen gebruiken, gaan we deze voor het hoofdelement binnenin naar links instellen en de rest van de inhoud in de header naar rechts laten zweven. Om dit te doen, voegt u de logoklasse aan het element toe. Vervolgens voegen we binnen onze CSS toe nieuwe sectie

stijlen voor de hoofdkop. In deze sectie selecteren we een element met de logo-klasse en stellen we de float in op left . Stijlenconferentie

/* ====================================== Hoofdkop ====== = =================================== */ .logo ( zwevend: links; )
Terwijl we hier zijn, laten we wat meer details aan ons logo toevoegen. Laten we beginnen met het plaatsen van het element

of een regeleinde tussen de woorden “Stijlen” ​​en “Conferentie” om onze logotekst op twee regels te laten verschijnen.

In CSS voegen we een rand toe langs de bovenkant van ons logo en wat verticale opvulling, zodat het logo vrij kan ‘ademen’.
Stijlen

Conferentie

Logo (rand bovenaan: 4px effen #648880; opvulling: 40px 0 22px 0; zwevend: links; )

...

Het element krijgt vorm, dus laten we eens kijken naar de . Vergelijkbaar met wat we deden met , zullen we de vlotter voor ons copyright naar links binnen zetten en alle andere elementen eromheen naar rechts laten stromen.

In tegenstelling tot het element gaan we de klasse echter niet rechtstreeks op het zwevende element toepassen. Deze keer gaan we een klasse toevoegen aan het bovenliggende element van het float-element en een uniek element gebruiken CSS-kiezer om een ​​element te selecteren en het vervolgens een float te geven.

Laten we beginnen met het toevoegen van de primaire voettekstklasse aan het element. Omdat we weten dat we binnenin zwevende elementen hebben, moeten we een groepsles toevoegen terwijl we toch bezig zijn.

...

Nu de primaire voettekstklasse op het element is ingesteld, kunnen we deze klasse gebruiken om het element specifiek te selecteren met behulp van CSS. We willen het een vlotter geven zoals links. Vergeet niet om een ​​nieuwe sectie in ons main.css-bestand te maken voor de hoofdvoettekststijl.

Om dit te controleren selecteren we hier een element dat zich in een element zou moeten bevinden met de primaire voettekstwaarde van het class-attribuut, zoals bijvoorbeeld ons element.

Ten slotte voegen we wat opvulling toe aan de boven- en onderkant van het element, dit zal helpen het een beetje te scheiden van de rest van de pagina. We kunnen dit rechtstreeks doen met behulp van de klasse Primary-footer.

Primaire voettekst (opvulling-onder: 44px; opvulling-boven: 44px; )

Met al deze wijzigingen aan de en-elementen moeten we er zeker van zijn dat ze op elke pagina worden aangebracht, niet alleen op de index.html-pagina.

Rijst. 5.01. Door gebruik te maken van meerdere floats werken de elementen op de hoofdpagina van de Styles Conference samen

Naast het gebruik van float is een andere manier waarop we inhoud kunnen positioneren het gebruik van de display-eigenschap in combinatie met de inline-block-waarde. De inline-block-methode is, zoals we later zullen bespreken, vooral handig voor het opmaken van pagina's of voor het plaatsen van elementen in een lijn naast elkaar.

Bedenk dat de inline-blokwaarde voor de eigenschap display elementen op een regel weergeeft en ervoor zorgt dat ze alle eigenschappen van het boxmodel kunnen overnemen, inclusief height , width , padding , border en margin . Door inline-block te gebruiken, kunnen we optimaal profiteren van het blokmodel zonder dat we ons zorgen hoeven te maken over het opruimen van eventuele drijvers.

Laten we ons voorbeeld met drie kolommen vanaf het begin bekijken. We beginnen met het opslaan van onze HTML als volgt:

... ... ... ... ...

Nu zullen we, in plaats van zweven voor onze drie elementen, hun weergavewaarde veranderen in inline-block en vertrekken marge-eigenschappen en breedte zijn hetzelfde als voorheen. Als gevolg hiervan zal onze CSS er als volgt uitzien:

Sectie (weergave: inline-blok; marge: 0 1,5%; breedte: 30%; )

Helaas is deze code alleen niet genoeg om de truc te volbrengen laatste onderdeel wordt naar een nieuwe regel geduwd. Houd er rekening mee dat omdat inline-blokelementen op een lijn naast elkaar verschijnen, er een enkele spatie tussen zit. Wanneer de grootte van elke afzonderlijke ruimte wordt opgeteld bij de breedte en de horizontale margewaarde van alle elementen op de lijn, wordt de totale breedte te groot, waardoor het laatste element op een nieuwe lijn wordt gedrukt. Om alle elementen op één regel weer te geven, moet u de witte ruimte tussen elk element verwijderen.

Er zijn verschillende methoden om ruimte tussen inline-blokelementen te verwijderen, en sommige zijn complexer dan andere. We gaan ons concentreren op de twee eenvoudigste methoden, die beide binnen HTML voorkomen.

De eerste oplossing is om de openingstag van elk nieuw element op dezelfde regel te plaatsen als de slottag van het vorige element. In plaats van te gebruiken nieuwe lijn voor elk element beginnen we de elementen uiteindelijk op dezelfde regel. Onze HTML zou er als volgt uit kunnen zien:

... ... ... ... ...

Door op deze manier inline-blokelementen te schrijven, zorgt u ervoor dat er in HTML geen ruimte tussen dergelijke elementen zit. Daarom verschijnt de spatie niet wanneer de pagina wordt weergegeven.

Een andere methode om ruimte tussen inline-blokelementen te verwijderen is door een HTML-opmerking te openen onmiddellijk na de afsluitende tag van het element. Sluit vervolgens de opmerking net voor de openingstag van het volgende element. Hierdoor kunnen inline-blokelementen beginnen en eindigen op afzonderlijke regels in HTML en wordt eventuele ruimte tussen elementen "gecommentarieerd". De resulterende code ziet er als volgt uit:

... ... ... ... ...

Geen van deze opties is perfect, maar ze zijn nuttig. Ik ben geneigd commentaar te gebruiken voor betere organisatie, maar welke optie u kiest, is geheel aan u.

Bij het bouwen van een site is het altijd het beste om modulaire stijlen te schrijven die elders kunnen worden hergebruikt, en herbruikbare lay-outs staan ​​bovenaan de lijst met herbruikbare code. Lay-outs kunnen worden gemaakt met behulp van floats of inline-block-elementen, maar welke werkt het beste en waarom?

De vraag of zwevende of inline-blokelementen beter zijn voor de paginastructuur staat open voor discussie. Mijn aanpak is om inline-blokelementen te gebruiken om een ​​raster- of pagina-indeling te maken, en vervolgens float te gebruiken als ik wil dat de inhoud rondvloeit van dit element(daar zijn praalwagens voor ontworpen bij het werken met afbeeldingen). Over het algemeen vind ik inline-blokelementen ook gemakkelijker om mee te werken.

Gebruik echter wat voor u het beste werkt. Als u meer bekend bent met de ene aanpak dan met de andere, gebruik deze dan.

Er zijn nieuwe CSS-specificaties in de maak - met name flex- en grid-eigenschappen - die u zullen helpen beslissen hoe u uw pagina's het beste kunt opmaken. Houd deze methoden in de gaten wanneer ze verschijnen.

Met een goed begrip van herbruikbare lay-outs is het tijd om er een te implementeren op onze Styles Conference-site.

Voor de Styles Conference-website zullen we een lay-out met drie kolommen maken met behulp van inline-blokelementen. We zullen dit doen zodat we drie kolommen krijgen dezelfde breedte of twee kolommen waarvan de totale breedte verdeeld is als 2/3 voor de ene en 1/3 voor de andere.

Eerst maken we klassen die de breedte van deze kolommen definiëren. We noemen deze twee klassen col-1-3 voor een derde en col-2-3 voor tweederde. Laten we in de Grid-sectie van ons main.css-bestand verder gaan en deze klassen en hun corresponderende breedtes definiëren.

Col-1-3 (breedte: 33,33%; ) .col-2-3 (breedte: 66,66%; )

We willen dat beide kolommen verschijnen als inline blokelementen. Dat moeten wij ook zeker weten verticale uitlijning ze hebben het bovenaan elke kolom geplaatst.

Laten we twee nieuwe selectors maken die de weergave delen en verticaal uitlijnen.

Col-1-3, .col-2-3 (weergave: inline-blok; verticaal uitgelijnd: boven; )

Kijk nog eens naar CSS. We hebben twee klassenkiezers col-1-3 en col-2-3 gemaakt, gescheiden door een komma. Een komma aan het einde van de eerste selector betekent dat deze wordt gevolgd door een andere selector. Na de tweede selector bevindt zich een accolade die opent, wat aangeeft dat de stijlbeschrijving begint. Door een komma te gebruiken om selectors van elkaar te scheiden, kunnen we één stijl tegelijkertijd aan meerdere selectors binden.

We willen wat ruimte tussen de kolommen aanbrengen om de inhoud op te splitsen. Dit kunt u doen door horizontale opvulling aan elke kolom toe te voegen.

Dit werkt goed, maar als twee kolommen naast elkaar worden geplaatst, zal de breedte van de ruimte ertussen twee keer zo breed zijn als de ruimte vanaf de buitenrand. Om dit in evenwicht te brengen, plaatsen we al onze kolommen in een raster en voegen we er dezelfde opvulling aan toe.

Laten we de klasse grid gebruiken om ons raster te definiëren en vervolgens dezelfde horizontale opvulling geven aan de klassen grid, col-1-3 en col-2-3. Met opnieuw komma's die onze selectors scheiden, ziet onze CSS er als volgt uit:

Raster, .col-1-3, .col-2-3 (opvulling links: 15px; opvulling rechts: 15px; )

Wanneer we horizontale opvulling instellen, moeten we voorzichtig zijn. Vergeet niet dat we in de laatste les een container met de containerklasse hebben gemaakt om al onze inhoud op de pagina te centreren met een breedte van 960 pixels. IN op dit moment Als we een element met de grid-klasse in een element met de container-klasse zouden plaatsen, dan zou hun horizontale opvulling bij elkaar opgeteld worden en zouden onze kolommen niet weergegeven worden in verhouding tot de breedte van de rest van de pagina.

We doen dit door de oude containerregelset op te splitsen in het volgende:

Container, .grid ( marge: 0 auto; breedte: 960px; ) .container ( vulling-links: 30px; vulling-rechts: 30px; )

Nu zal elk element met de container- of grid-klasse 960 pixels breed zijn en zich in het midden van de pagina bevinden. Bovendien hebben we de bestaande horizontale opvulling voor elk element met de containerklasse behouden door het naar een nieuwe, afzonderlijke regelset te verplaatsen.

Oké, al het moeilijke deel van het opzetten van de mesh is voltooid. Nu is het tijd om met onze HTML te werken en te zien hoe deze klassen werken.

We beginnen met de teasers op de startpagina, in het index.html-bestand, uitgelijnd in drie kolommen. Momenteel zijn teasers verpakt in een element met de containerklasse. We willen de containerklasse wijzigen in raster, zodat we kolommen erin kunnen gaan plaatsen.

...

... ... ...

En ten slotte moeten we, aangezien elk van onze kolommen een inline blokelement is, ervoor zorgen dat we alle witte ruimte ertussen verwijderen. Om dit te doen, gebruiken we opmerkingen en voegen we wat documentatie toe aan elke sectie om onze code beter te organiseren.

... ... ...

Ter controle hebben we een opmerking achtergelaten op regel 3, waarin het gedeelte 'Speakers' wordt geïdentificeerd dat daarop volgt. Aan het einde van regel 7 openen we een commentaar onmiddellijk na de afsluitende tag. In dit commentaar definiëren we op regel 9 de volgende sectie "Planning". Vervolgens sluiten we de opmerking aan het begin van regel 11, net vóór de openingstag. Een soortgelijke commentaarstructuur verschijnt op de regels 13 tot en met 17 tussen de twee elementen, net vóór het gedeelte 'Locatie'. Over het algemeen hebben we eventuele witruimte tussen de kolommen van commentaar voorzien, terwijl we tegelijkertijd dezelfde opmerkingen gebruikten om onze secties te identificeren.

We hebben nu een herbruikbaar raster met drie kolommen dat verschillende lay-outs ondersteunt, met behulp van 1/3 en 2/3 kolombreedtes. Onze startpagina bevat nu drie kolommen, die alle teasers scheiden.

Rijst. 5.02. Startpagina Styles Conference bevat nu een lay-out met drie kolommen

Hieronder kunt u de Styles Conference-website in de huidige staat bekijken en de huidige broncode van de site downloaden.

Vroeg of laat zal iedereen een element precies willen positioneren, maar zwevende of inline-blokelementen laten zo'n truc niet toe. Zwevende elementen die een element uit de stroom van de pagina verwijderen, leveren vaak ongewenste resultaten op omdat omringende elementen zich rond het zwevende element wikkelen. Inline blokelementen kunnen, tenzij we kolommen maken, behoorlijk lastig zijn als het gaat om juiste positie. Voor dit soort situaties kunnen we de eigenschap position gebruiken in combinatie met de offset-eigenschappen van het blok.

De eigenschap position bepaalt hoe het element op de pagina wordt gepositioneerd en of het in de normale documentstroom wordt weergegeven. Het wordt gebruikt in combinatie met de offset-eigenschappen top , right , bottom en left van het blok, die precies bepalen waar het element wordt gepositioneerd door het element in verschillende richtingen te verplaatsen.

Standaard is de positiewaarde van elk element ingesteld op static , wat betekent dat het element bestaat in de normale stroom van het document en geen eigenschappen nodig heeft om het te positioneren. De waarde static wordt meestal overschreven door de waarde relatieve of absolute , waar we hierna naar zullen kijken.

Door de eigenschap position op relatief te zetten, kunnen elementen in de normale stroom van de pagina verschijnen, waarbij ruimte voor het element wordt gereserveerd zoals bedoeld en wordt voorkomen dat andere elementen er omheen stromen. U kunt er echter ook de positie van een element mee wijzigen met behulp van de offset-eigenschappen. Overweeg bijvoorbeeld HTML volgen en CSS:

... ... ...

Div ( hoogte: 100px; breedte: 100px; ) .offset ( links: 20px; positie: relatief; boven: 20px; )

Hier is de positiewaarde van het tweede element met klasse offset ingesteld op relatief, evenals twee offset-eigenschappen: left en top . Hierdoor blijft de oorspronkelijke positie van het element behouden en mogen andere elementen niet naar dat gebied bewegen. Bovendien verplaatsen de offset-eigenschappen het element door het 20 pixels vanaf de linkerkant en 20 pixels vanaf de bovenkant van de oorspronkelijke locatie te duwen.

Voor relatief gepositioneerde elementen is het belangrijk om te weten dat de offset-eigenschappen van het blok bepalen waar het element naartoe zal worden verplaatst, gegeven zijn oorspronkelijke positie. Dus een linkereigenschap met een waarde van 20 pixels duwt het element feitelijk 20 pixels naar rechts. Een topeigenschap met een waarde van 20px zal het element vervolgens 20px naar beneden duwen.

Wanneer we een element positioneren met behulp van de offset-eigenschappen, overlapt het element het element eronder, in plaats van het naar beneden te duwen zoals de marge- of opvullingseigenschappen doen.

De absolute waarde voor de eigenschap position verschilt van de relatieve waarde doordat het absoluut gepositioneerde element niet verschijnt in de normale stroom van het document, en de oorspronkelijke ruimte en positie van het absoluut gepositioneerde element niet is gereserveerd.

Bovendien bewegen absoluut gepositioneerde elementen ten opzichte van hun dichtstbijzijnde relatief gepositioneerde ouderelement. Als er geen relatief gepositioneerd ouder bestaat, wordt een absoluut gepositioneerd element relatief gepositioneerd ten opzichte van het element. Dit is een klein stukje informatie; laten we eens kijken hoe het werkt in een code:

...

Sectie ( positie: relatief; ) div ( positie: absoluut; rechts: 20px; boven: 20px; )

Dit voorbeeld positioneert het element relatief, maar bevat geen offset-eigenschappen. Daarom verandert zijn positie niet. Een element met klasse-offset bevat een positiewaarde van absoluut. Omdat het element het dichtst bij het element relatief gepositioneerde ouderelement is, zal het element ten opzichte van het element worden gepositioneerd.

Voor relatief gepositioneerde elementen bepalen de offset-eigenschappen in welke richting het element ten opzichte van zichzelf wordt verplaatst. Voor absoluut gepositioneerde elementen bepalen de offset-eigenschappen in welke richting het element wordt verplaatst ten opzichte van het dichtstbijzijnde relatief gepositioneerde ouder.

Als gevolg van de eigenschappen Rechts en Boven zal het element 20 pixels van rechts en 20 pixels van boven naar binnen verschijnen.

Omdat het element absoluut is gepositioneerd, bevindt het zich niet in de normale flow van de pagina en overlapt het alle omliggende elementen. Bovendien blijft de oorspronkelijke positie niet behouden en kunnen andere elementen deze plaats innemen. Over het algemeen kan de meeste positionering plaatsvinden zonder gebruik te maken van de positie-eigenschappen en offset-eigenschappen, maar in sommige gevallen kunnen ze uiterst nuttig zijn.

Leren hoe u inhoud in HTML en CSS kunt positioneren, is een enorme stap in de richting van het beheersen van deze talen. Voeg hieraan toe blokmodel en nu volgen we vol vertrouwen het pad om front-end-ontwikkelaars te worden.

Positionering in CSS lijkt vrij eenvoudig. Geef aan welk blok en waar deze moet komen. Alles is echter niet zo eenvoudig als het op het eerste gezicht lijkt. Er zijn verschillende punten die nieuwkomers in verwarring kunnen brengen. Je kunt veel uit positionering halen meer voordelen, als je tot in detail begrijpt hoe het werkt.

Voordat je begint raad ik je aan het artikel Box Model in CSS te lezen. In een notendop: elk element in html is een rechthoek waarvoor u de waarden van de binnen- en buitenmarges kunt opgeven, evenals de rand die ze scheidt.

Positioneringsschema's bepalen waar deze rechthoek zich moet bevinden, en hoe deze de elementen eromheen moet beïnvloeden.

De eigenschap position in CSS kan vijf waarden aannemen:

• absoluut
• relatief
• vast
• statisch
• erven

De waarde statisch is de standaardwaarde. Elk element met statische positionering bevindt zich in de algemene stroom van het document. De regels voor de plaatsing ervan worden bepaald door het Box-model. Voor dergelijke elementen worden de eigenschappen top , right , bottom en left genegeerd. Om deze eigenschappen te kunnen gebruiken, moet de positionering van het element absoluut, relatief of vast zijn.

De betekenis van erven is dezelfde als in alle andere CSS-eigenschappen, wordt gebruikt om ervoor te zorgen dat het element dezelfde waarde gebruikt als het bovenliggende element.

Met absolute positionering wordt een element uit de algehele stroom van het document verwijderd. Wat de omringende elementen betreft, negeren ze in dit geval eenvoudigweg de gezochte, alsof de eigenschap display: none; . Als je niet wilt dat de ruimte voor zo'n element wordt opgevuld met andere elementen, dan moet je een andere aanpak bedenken.

U stelt de positie van een element met absolute positionering in met behulp van de eigenschappen top , left , right en bottom. U hoeft er slechts twee op te geven: boven of onder en links of rechts. Als er geen eigenschappen zijn opgegeven, wordt het paar linksboven ingesteld op 0.

De sleutel tot absolute positionering is begrijpen wat uw referentiepunt is. Als de bovenste eigenschap is ingesteld op 20px, waar moeten deze dan worden geteld?

Het antwoord is simpel: dergelijke elementen worden gepositioneerd ten opzichte van het dichtstbijzijnde ouderelement, dat een andere positionering heeft dan statisch. Als een dergelijk element niet bestaat, wordt het element ten opzichte van het hoofddocument gepositioneerd. Dat wil zeggen dat CSS bij het instellen van de absolute positionering de browser vertelt om naar het bovenliggende element te kijken en, als de positionering ervan niet statisch is, het huidige element relatief daarmee uit te lijnen.

Relatief gepositioneerde elementen worden geplaatst op basis van hun eigen positie, de gebruikelijke verschuiving ten opzichte van hun normale locatie. Dit is vergelijkbaar met het toevoegen van opvulling aan een element met behulp van de marge-eigenschap. Er is echter één significant verschil: aangrenzende elementen houden bij het gebruik van positionering geen rekening met deze verschuiving.

Stel je het op deze manier voor: een bepaald beeld wordt verschoven en op zijn plaats blijft een ‘geest’ over; alle elementen bevinden zich ten opzichte van deze ‘geest’. Hierdoor kunnen we elementen op elkaar stapelen.

Elementen met relatieve positionering worden dus uit de normale stroom van het element gehaald, maar beïnvloeden nog steeds de plaatsing van aangrenzende elementen, die zich zo gedragen dat het originele element zich nog steeds in de documentstroom bevindt.

In dit geval moeten we niet de vraag stellen waar het element hier is gepositioneerd. Het antwoord is altijd: normale documentstroom. Het lijkt er heel erg op dat u opvulling aan een element hebt toegevoegd, maar tegelijkertijd de aangrenzende elementen niet heeft beïnvloed.

Vaste positionering werkt vergelijkbaar met absolute positionering, met kleine verschillen.

Ten eerste wordt een element met een vaste positie altijd gepositioneerd ten opzichte van het browservenster, en worden bovenliggende elementen genegeerd.

Het tweede verschil komt van de naam. Vaste elementen staan ​​vast op de pagina. Ze bewegen niet tijdens het scrollen.

De websitepagina is tweedimensionaal. Het heeft breedte en hoogte. Z-index voegt een derde dimensie toe: diepte.

Hoe hoger deze index, hoe hoger het element zich op de pagina bevindt. Hiermee kunnen we ervoor zorgen dat het ene element op het andere wordt geplaatst. Standaard is de waarde nul. Negatieve waarden zijn ook acceptabel.

In feite is z-index veel complexer dan ik het hier beschrijf, maar dat is een onderwerp voor een ander artikel. Het belangrijkste om te onthouden is het idee van de derde dimensie en het feit dat alleen gepositioneerde elementen deze eigenschap kunnen gebruiken.

Laten we er een paar bekijken veelvoorkomende problemen gerelateerd aan positionering, evenals een paar woorden over hun oplossing.

IE en z-index.

In IE6 wordt een element altijd bovenaan de stapel geselecteerd, ongeacht de z-index of de z-index van omliggende elementen.

We verwachten dat de alinea hoger verschijnt dan de afbeelding, omdat de z-index groter is. IE6 en IE7 plaatsen de afbeelding echter hoger omdat ze zich in verschillende documentstapels bevinden. Eén stapel is voor div, de tweede is voor img, en de afbeelding heeft een hogere z-index dan de div. Conclusie De eigenschap position stelt het positioneringsgedrag van een element in volgens een van de positioneringsschema's.

Beschikbare waarden

eigenschappen: absoluut , relatief , vast , statisch (standaard) en overerven .

Positioneringsschema's definiëren de regels voor het plaatsen van een element op een webpagina, evenals de invloed op de locatie van aangrenzende elementen.