,

,

,

. Label
wordt vaak gebruikt in de lay-out van moderne websites om rasters te maken en betekent eenvoudigweg een soort blok of container. Het is ook mogelijk om er andere tags in te nesten, wat niet bij alle blokelementen mogelijk is, dus
handig in gebruik. Blokken worden meestal op elkaar gestapeld en niet in inline-elementen geplaatst. Inline HTML-elementen zijn tekst en CSS wordt gebruikt om deze op te maken.
Gegeven een inhoudsbreedte is de totale blokbreedte de som van de waarden voor opvulling, marge, rand en breedte rechts en links. Op een bepaalde hoogte - vanaf de bovenste en onderste opvulling, marges, randen en hoogte. Tekst in blokelementen wordt standaard links uitgelijnd. Als een van deze inline-elementen samen met blokelementen bevat, wordt er een anoniem blok rond de inline-elementen gemaakt. De standaardstijl wordt erop toegepast. Het zal ook de opgegeven stijl overnemen die aan het bovenliggende element is toegewezen.
Documentstroom
Flow verwijst naar de volgorde waarin pagina-elementen worden weergegeven, bepaald door de eigenschappen die zijn opgegeven in CSS. In dit geval worden blokken standaard van boven naar beneden uitgelijnd, en als er niet genoeg ruimte is, worden inline-tags naar een nieuwe regel verplaatst en van boven naar beneden en van links naar rechts gerangschikt. De locatie van een element op de pagina hangt af van zijn plaats in de code: hoe hoger het is, hoe eerder het zich bevindt. Elk blokelement ziet eruit als een rechthoek die zijn buren wegduwt. U kunt dit gedrag wijzigen met behulp van speciale eigenschappen. Het uitlijnen van bepaalde blokken ten opzichte van het midden of de zijkanten van een container in CSS wordt positionering genoemd.
Positioneringselementen
De plaatsing van blokken kan worden gecontroleerd met behulp van absolute en relatieve positionering. Positionering wordt gebruikt om grote delen van een pagina een specifieke locatie te geven, om complexe interfaces, pop-ups en decoratieve elementen te creëren. De belangrijkste eigenschap die wordt gebruikt om blokken in CSS te positioneren is position. Het heeft vier belangrijke eigenschappen:
• familielid;
• absoluut;
• vast;
• statisch.
Met hun hulp kunt u van lay-outmodus wisselen door een van de vier parameters op te geven: boven, rechts, onder of links. Er is ook een eigenschap voor het ordenen van lagen: z-index. Positionering met de statische eigenschap wordt doorgaans niet gebruikt omdat dit de standaardpositionering van blokken aangeeft. Daarom heeft het gebruik van parameters hier op geen enkele manier invloed op. De andere drie eigenschappen worden gebruikt voor de lay-out: relatief, absoluut, vast.
Relatieve positionering
Relatieve positionering van blokken in CSS, d.w.z. de positie: relatieve eigenschap, betekent dat een element kan worden verplaatst en de oorspronkelijke positie kan worden gewijzigd. Zo'n blok blijft nog steeds in de stroom. In feite is niet hijzelf ontheemd, maar zijn kopie. Eigenschapswaarden zijn ingesteld om precies aan te geven hoeveel het blok in de ene of de andere richting zal bewegen. Ze worden meestal gemeten in pixels. Maar het is acceptabel om andere eenheden te gebruiken.

Eigenschappen gebruiken voor relatieve positionering
De bovenste eigenschap verplaatst een kopie van een bepaald blok omhoog of omlaag met het aantal pixels dat in de eigenschap is opgegeven. Bij gebruik blijven de elementen die zich eronder of boven bevinden op hun plaats, omdat het te verschuiven blok in feite ook nergens heen beweegt.
De onderste eigenschap verplaatst het blok in de tegenovergestelde richting van de bovenste eigenschap. Een positieve waarde helpt de waarde omhoog te brengen, en een negatieve waarde helpt de waarde omlaag te brengen. De eigenschappen right en left verplaatsen het element respectievelijk naar rechts en naar links. Door ze allemaal te combineren, kunt u de exacte locatie van het blok op de pagina instellen en het langs de verticale en horizontale coördinatenassen verschuiven. Als u de inspringingen vergroot, worden deze niet berekend vanaf de rand van het blok zelf, maar vanaf de kopieerverschuiving naar de zijkant.

Absolute positionering
De absolute positionering van blokken in CSS wordt gespecificeerd door de waarde van de eigenschap absolute position. Een gepositioneerd element valt absoluut uit de documentstroom en wordt ingenomen door aangrenzende blokken. De breedte van een dergelijk element wordt uitgerekt, afhankelijk van de inhoud, en kan worden verschoven door bepaalde waarden in te stellen voor de eigenschappen boven, links, rechts, onder. Absolute blokpositionering in CSS is handig voor koppen. Maar positie: absoluut werkt niet alleen voor blokelementen, maar ook voor inline-elementen.
Elementen op het midden uitlijnen
Een absoluut inline gepositioneerd element gedraagt ​​zich precies hetzelfde als een inline element. Daarom kan positionering ook worden gebruikt om tekst in CSS te besturen. U kunt er enkele nieuwe eigenschappen op toepassen, bijvoorbeeld de hoogte en breedte wijzigen. Centreren en verticale uitlijning in CSS gebruiken een combinatie van verschillende eigenschappen. Bepaalt de verticale uitlijning van de bovenste eigenschap. Als je een blok in CSS wilt centreren, moet de hoofdcontainer relatief gepositioneerd zijn en het uitgelijnde element absoluut gepositioneerd. De container moet de eigenschap top instellen: 50%, en om het element met de helft van zijn eigen hoogte te verplaatsen, gebruikt u de eigenschap vertalen met de waarde “0, -50%”. Absoluut gepositioneerde elementen kunnen in een nieuw type worden gescheiden, omdat daarop eigenschappen worden toegepast die niet beschikbaar zijn voor andere typen positionering.

Positionering ten opzichte van de linkerbovenhoek van de browser
De eigenschappen links, boven, rechts en onder werken verschillend op absoluut en relatief gepositioneerde elementen. Voor relatieve elementen stellen deze eigenschappen de offset in ten opzichte van de plaats waar het element zich bevindt. Absoluut gepositioneerde exemplaren nemen een plaats in ten opzichte van een specifiek coördinatensysteem dat is gekoppeld aan de grootte van het browservenster. Het uitgangspunt van dit systeem zijn de hoeken van het raam. Wanneer u de eigenschap left gebruikt, wordt de inspringing vanaf de linkerkant van de browser geteld, maar is er geen schuifbalk. Wanneer de eigenschap top absoluut is gepositioneerd, specificeert deze de offset vanaf de bovenkant van de browser tot de bovenkant van het element waarop deze wordt toegepast. Door beide eigenschappen te combineren kan het element ten opzichte van de linkerbovenhoek van de browser worden verplaatst.

Positionering ten opzichte van de rechterbovenhoek van de browser
Op dezelfde manier kunt u met behulp van de eigenschappen Rechts en Boven een element naar de rechterkant van het browservenster drukken en de verticale positie ervan wijzigen door het naar de rechterbovenhoek te verplaatsen. Als de rechtereigenschap op een negatieve waarde wordt ingesteld, wordt het blok buiten de vensterrand verplaatst. Hierna zou een schuifbalk moeten verschijnen. Om een ​​element naar beneden te verplaatsen, gebruik je de eigenschap bottom. Het specificeert de inspringing vanaf de onderkant van het browservenster tot de onderkant van het blok. Als de waarde negatief is, verschijnt er ook een schuifbalk, omdat het element voorbij de onderrand van het browservenster wordt verplaatst.
Coördinatensysteem voor absolute positionering
Standaard zijn alle elementen die een absolute positionering krijgen, gebonden aan één coördinatensysteem: het browservenster. Maar het kan worden gewijzigd door een relatieve positionering van een ouderelement te geven. Vervolgens zal het onderliggende blok van locatie veranderen, afhankelijk van het bovenliggende blok. Als er onder de ouderelementen meerdere zijn met relatieve positionering, wordt het tellen uitgevoerd vanaf de dichtstbijzijnde. In dit geval zal de standaardpositionering afwijken van wat is gespecificeerd in de body-tag.

Referentiepunt voor een absoluut gepositioneerd element
Voordat een element een absolute positionering kreeg, werd het op een bepaalde plaats een impliciete oorsprong genoemd. Als zo’n blok geen eigenschappen krijgt, zal het niet bewegen. U kunt het verschuiven door de marge-eigenschap in te stellen. Het werkt op dezelfde manier als de positioneringseigenschappen. Als u de waarde van de linkereigenschap en alle andere niet definieert, is deze gelijk aan auto. U kunt ook auto gebruiken om elementen terug te brengen naar hun oorspronkelijke plaats.

Vaste positionering
Een andere betekenis ligt vast. De eigenschap position verankert een element aan een specifieke locatie. Vaste positionering wordt vaak gebruikt om menu's in CSS te maken. Het is vergelijkbaar met absoluut, maar het vaste blok valt uit de stroom. Zelfs als je door de pagina scrollt, blijft zo'n element op zijn plaats, dus het is handig om het te gebruiken om een ​​menu in CSS te maken. Het startpunt is gekoppeld aan het browservenster. Als er meerdere gepositioneerde blokken zijn, wordt de eigenschap z-index gebruikt om ze te ordenen. Met zijn hulp kun je relatieve blokken overlappen met absolute blokken als je ze de bijbehorende index geeft, uitgedrukt als een geheel getal. Hoe groter het is, hoe hoger het blok zal zijn.
Tegenwoordig kunnen webontwikkelaars complexe webpagina-indelingen bouwen met behulp van verschillende CSS-technieken. Sommige van deze technieken hebben een lange geschiedenis (floats), andere (flexbox) hebben de laatste jaren aan populariteit gewonnen.
In dit artikel gaan we dieper in op enkele weinig bekende zaken over CSS-positionering.
Voordat we beginnen, laten we kort de basisprincipes van de verschillende soorten positionering doornemen.
Overzicht van beschikbare positioneringsmethoden
De CSS-positie-eigenschap bepaalt het type positionering van een element.
Positioneringsopties
statisch is de standaardwaarde voor de positioneringseigenschap. Wij adviseren dat dit element geen positionering gebruikt. Positionering wordt alleen toegepast als u een ander positioneringstype opgeeft dan de standaardinstelling.
Om dit te doen, moet u de eigenschap position instellen op een van de volgende waarden:
• familielid
• absoluut
• vast
• kleverig
En pas nadat u de positionering hebt ingesteld, kunt u eigenschappen gebruiken die het element compenseren:
• rechts
• onderkant
• De initiële waarde van deze eigenschappen is het auto-trefwoord.
Houd er rekening mee dat als de eigenschap position van een element is ingesteld op absoluut of fixed , het een absoluut gepositioneerd element is. Ook begint de eigenschap z-index te werken voor gepositioneerde elementen, die de stapelvolgorde bepalen.
Verschillen tussen de belangrijkste positioneringsmethoden
Laten we nu snel kijken naar drie fundamentele verschillen tussen de beschikbare positioneringstypen:
• absoluut (absoluut) gepositioneerde elementen worden volledig uit de stroom verwijderd, hun plaats wordt ingenomen door hun naaste buren.
• relatief gepositioneerd (relatief) en gelijmd (plakkerig) behouden hun plaats in de stroom en hun naaste buren bezetten deze niet. De opvulling van deze elementen neemt echter geen ruimte in beslag, maar wordt volledig genegeerd door andere elementen en dit kan resulteren in overlappende elementen.
• vaste elementen (en vaste positionering is een soort absoluut) worden altijd gepositioneerd ten opzichte van het zichtbaarheidsgebied (waarbij de aanwezigheid van positionering in voorouders wordt genegeerd), terwijl vastgezette elementen relatief ten opzichte van de dichtstbijzijnde voorloper worden gepositioneerd met scrollen (overflow: auto). En alleen als dergelijke voorouders ontbreken, worden ze ten opzichte van de zichtbaarheidszone gepositioneerd.
Je kunt dit in meer detail zien in de demo:
Opmerking: Positionering van plakkerige elementen is nog steeds een experimentele technologie met beperkte ondersteuning in browsers. Als u dat wenst, kunt u uiteraard een polyfill gebruiken om deze functionaliteit aan de browser toe te voegen, maar gezien de lage prevalentie ervan zal deze eigenschap in het artikel niet worden besproken.
Positioneringselementen met absoluut positioneringstype
Ik weet zeker dat de meeste mensen weten hoe absolute positionering werkt. Er zijn echter veel dingen die beginners in verwarring kunnen brengen.
Daarom besloot ik ermee te beginnen bij het beschrijven van weinig bekende kenmerken van positionering.
Een absoluut gepositioneerd element is dus verschoven ten opzichte van zijn dichtstbijzijnde gepositioneerde voorouder. Dit werkt uiteraard als een van de voorouders een andere dan statische positie heeft - als het element geen gepositioneerde voorouders heeft, wordt het verschoven ten opzichte van het zichtbaarheidsgebied.
Dit wordt gedemonstreerd door het volgende voorbeeld:
In deze demo is het groene blok aanvankelijk absoluut gepositioneerd zonder opvulling bottom:0 en left:0 ; zijn voorloper (het rode blok) was helemaal niet gepositioneerd.
We hebben de buitenverpakking echter relatief gepositioneerd (een element met klasse jumbotron). Merk op hoe de positionering van het groene blok verandert wanneer het positioneringstype van zijn voorouders verandert.
Absoluut gepositioneerde elementen negeren de float-eigenschap
Als we absolute of vaste positionering toepassen op een zwevend element, wordt de eigenschap float ingesteld op none . Aan de andere kant, als we de relatieve positionering instellen, blijft het element zwevend.
Bekijk de bijbehorende demo:
In dit voorbeeld definiëren we twee verschillende elementen die naar rechts zweven. Merk op dat wanneer een rood blok absoluut gepositioneerd wordt, het de waarde van de float-eigenschap negeert, terwijl een relatief gepositioneerd groen blok de float-waarde behoudt.
Absoluut gepositioneerde inline-elementen worden blokelementen
Een inline-element met absolute of vaste positionering neemt de eigenschappen van een blokelement over. De conversie van inline-elementen naar blokelementen wordt in de tabel gedetailleerder beschreven.
In dit geval hebben we twee verschillende elementen gemaakt. Het eerste (groene blok) is een blokelement en het tweede (rode blok) is een inline-element. In eerste instantie is alleen het groene blokje zichtbaar.
Het rode vak is niet zichtbaar omdat de eigenschappen width en height alleen werken met blok- en inline-blokelementen, en omdat het geen inhoud heeft, heeft het ook geen afmetingen.
Wanneer u een absolute of vaste positie aan een rood blok toekent, wordt het een blokblok en worden de daarin gespecificeerde blokgroottes van kracht.
Absoluut gepositioneerde elementen hebben geen instorting van de opvulling
Wanneer twee verticale marges elkaar raken, worden ze standaard gecombineerd tot één die gelijk is aan het maximum ervan. Dit wordt marge-instorting genoemd.
Het gedrag van absoluut gepositioneerde elementen is hier vergelijkbaar met zwevende elementen: hun opvulling wordt niet gecombineerd met de aangrenzende elementen.
In deze demo krijgt het element een opvulling van 20 pixels. De opvulling ervan valt samen met de opvulling van het bovenliggende element, die ook 20 pixels bedraagt. Zoals je kunt zien, is er alleen bij absolute positionering geen ineenstorting.
Maar hoe kunnen we voorkomen dat de marges instorten? We moeten er een soort afscheider tussen plaatsen.
Dit kan een opvulling of een rand zijn, en kan worden toegepast op zowel de bovenliggende als de onderliggende elementen. Een andere optie is om een ​​clearfix aan het bovenliggende element toe te voegen.
Positioneringselementen met pixels en percentages
Heeft u ooit percentages in plaats van pixels gebruikt om elementen te positioneren? Als het antwoord ja is, weet u dat de offset van het element afhangt van de gekozen eenheden (pixels of percentages).
Het is een beetje verwarrend, nietwaar? Laten we dus eerst eens kijken wat de specificatie zegt over de procentuele offset:
Offset als percentage van de breedte (voor links en rechts) of hoogte (boven of onder) van het bovenliggende blok. Voor gelijmde elementen wordt de offset berekend als een percentage van de breedte (voor links en rechts) of hoogte (boven of onder) van de stroom. Negatieve waarden zijn acceptabel.
Zoals gezegd, wanneer u de verschuiving instelt als een percentage, hangt de positie van het element af van de breedte en hoogte van het bovenliggende element.
De demo laat dit verschil zien:
In dit voorbeeld worden pixels en percentages voor de offset gebruikt. Als u een verschuiving in pixels opgeeft, wordt het element uiteraard verplaatst naar de plek waar het nodig is.
En als we een percentage voor de offset kiezen, zal het resultaat afhangen van de grootte van het bovenliggende element. Hier is een visualisatie die laat zien hoe de nieuwe positie wordt berekend:
Opmerking: Zoals u waarschijnlijk weet, kunt u met de eigenschap transform (samen met de verschillende vertaalfuncties) ook de positie van een element wijzigen. Maar in dit geval zal de berekening bij het gebruik van percentages gebaseerd zijn op de grootte van het element zelf, en niet op het bovenliggende element.
Conclusie
Ik hoop dat dit artikel je heeft geholpen de positionering in CSS beter te begrijpen en een aantal uitdagingen heeft verduidelijkt.
Wanneer u een blokrelatief positioneert, moet u de eigenschap instellen positie: relatief en verplaatsingseigenschappen. De verplaatsing zal in dit geval niet plaatsvinden ten opzichte van het 'ouder'-element (zoals bij absolute positionering), maar ten opzichte van het blok zelf in de normale stroom. Dit zal duidelijker worden met een voorbeeld. Laten we zeggen dat we een HTML-pagina hebben met drie div's:
Relatieve positionering
Laten we de afmetingen en grenzen van deze blokken instellen in het stijlblad:
#blok1, #blok2, #blok3 (rand:1px effen rood; breedte:150px; hoogte:50px; )
Nu ziet onze pagina in de browser er als volgt uit:
Laten we nu de positie van het tweede blok wijzigen door een regel aan de stijlpagina toe te voegen:
#blok1, #blok2, #blok3 ( rand:1px effen rood; breedte:150px; hoogte:50px; ) #blok2( positie:relatief; links:50px; boven:25px; )
Onze pagina ziet er nu zo uit:

Ons tweede blok is naar beneden en naar rechts verplaatst ten opzichte van waar het bij normale stroming zou zijn geweest. De overige blokken bleven op hun plaats. In de praktijk wordt relatieve positionering vrij zelden gebruikt, dus we zullen er geen aandacht meer aan besteden en zwevende blokken overwegen.
Zwevende blokken
Deze blokken kunnen niet met pixelprecisie worden gepositioneerd, zoals in eerdere schema's, maar dit positioneringsschema is heel gebruikelijk. Zelden overleeft een website zonder zwevende blokken, en het is volkomen onmogelijk om zonder deze blokken een ‘vloeiende’ website-indeling te maken.
Dergelijke blokken kunnen vrij over de pagina bewegen; afbeeldingen in HTML gedragen zich op een vergelijkbare manier, uitgelijnd met behulp van de parameter uitlijnen.
Zwevende blokken worden gedefinieerd door de eigenschap vlot, die bepaalt of het blok zweeft en in welke richting het beweegt. Er zijn drie opties:
• links- het blok wordt tegen de linkerrand gedrukt, de overige elementen vloeien er aan de rechterkant omheen.


• rechts- het blok wordt tegen de rechterrand gedrukt, de overige elementen vloeien er aan de linkerkant omheen.


• geen- het blok beweegt niet en wordt gepositioneerd volgens de eigenschap positie.
Laten we eens kijken naar een voorbeeld. Laten we zeggen dat we een HTML-pagina hebben met de volgende code:
Blok positionering
Blok 1 tekst
En een style.css-pagina met de volgende code:
#blok1(rand:1px effen rood; breedte:150px; hoogte:50px; )
Nu ziet onze pagina in de browser er als volgt uit:
Laten we ons blok laten zweven en naar de linkerrand duwen:
#blok1(rand:1px effen rood; breedte:150px; hoogte:50px; zwevend:links; )
Laten we nu het blok naar de rechterrand duwen:
#blok1(rand:1px effen rood; breedte:150px; hoogte:50px; zwevend:rechts; )
Nu ziet onze pagina in de browser er als volgt uit:
Wat gebeurt er als er meerdere zwevende blokken op de pagina staan? Laten we nog een blok toevoegen aan onze html-pagina:
Blok positionering
Blok 1 tekst
Bloktekst 2
Slechts enkele elementen op de pagina. Het kan alleen maar tekst, links, lijsten, afbeeldingen, enz. zijn.
En geef ze verschillende vastgoedwaarden vlot:
#blok1( rand:1px effen rood; breedte:150px; hoogte:50px; zwevend:links; ) #blok2( rand:1px effen rood; breedte:150px; hoogte:50px; zwevend:rechts; )
Nu ziet onze pagina in de browser er als volgt uit:
Wat als ze dezelfde waarden hebben? Bijvoorbeeld:
#blok1( rand:1px effen rood; breedte:150px; hoogte:50px; zwevend:links; ) #blok2( rand:1px effen rood; breedte:150px; hoogte:50px; zwevend:links; )
Vervolgens wordt het tweede blok tegen de rechterrand van het eerste blok gedrukt:
De situatie zal vergelijkbaar zijn voor dezelfde waarden rechts:
#blok1( rand:1px effen rood; breedte:150px; hoogte:50px; zwevend:rechts; ) #blok2( rand:1px effen rood; breedte:150px; hoogte:50px; zwevend:rechts; )
Let op: eerst wordt blok 1 tegen de rechterrand gedrukt, en dan wordt blok 2 ertegenaan gedrukt.
Maar wat als we willen dat de blokken tegen de rechterrand worden gedrukt, maar onder elkaar worden geplaatst. Hiervoor bestaat een pand duidelijk, die specificeert welke zijden van een zwevend blok niet aan andere zwevende blokken kunnen grenzen. Deze eigenschap kan een van de volgende vier waarden hebben:
• links- het blok moet zich onder alle blokken aan de linkerkant bevinden.


• rechts- het blok moet zich onder alle rechtszijdige blokken bevinden.


• beide- het blok moet zich onder alle zwevende blokken bevinden.


• geen- er zijn geen beperkingen, dit is de standaardwaarde.


Laten we deze eigenschap instellen voor het tweede blok in ons laatste voorbeeld:
#blok1( rand:1px effen rood; breedte:150px; hoogte:50px; zwevend:rechts; ) #blok2( rand:1px effen rood; breedte:150px; hoogte:50px; zwevend:rechts; helder:rechts; )
Nu is het geworden zoals ik wilde: het ene blok onder het andere:

In de vorige les hebben we een pagina als deze gemaakt met behulp van absolute positionering:

Laten we eens kijken hoe dit kan worden gedaan met behulp van zwevende blokken. De code voor de pagina zelf is dus als volgt:
Blok positionering
koptekst van de site
Inhoud
nieuws blok
onderaan de site
Laten we op de style.css-pagina eerst de afmetingen en achtergrond voor onze blokken instellen:
#header( achtergrond:donkerrood; breedte:715px; hoogte:100px; ) #menu( achtergrond:oldlace; breedte:190px; hoogte:300px; ) #content( achtergrond:oldlace; breedte:525px; hoogte:300px; ) #footer ( achtergrond:donkerrood; breedte:715px; hoogte:30px; ) #news( achtergrond:geel; breedte:150px; hoogte:280px; )
Nu bevinden onze blokken zich in een normale stroom, d.w.z. de een onder de ander. We moeten blokken maken menu En inhoud zwevend en linkshandig. Een blok nieuws moet tegen de rechterrand drukken, d.w.z. We maken er een rechtshandig zwevend blok van:
#header( achtergrond:donkerrood; breedte:715px; hoogte:100px; ) #menu( achtergrond:oldlace; breedte:190px; hoogte:300px; float:left; ) #content( achtergrond:oldlace; breedte:525px; hoogte:300px ; float:left; ) #footer( achtergrond:donkerrood; breedte:715px; hoogte:30px; ) #news( achtergrond:geel; breedte:150px; hoogte:280px; float:right; )
Onze pagina in de browser ziet er als volgt uit:

Laten we eens naar ons nieuwsblok kijken, je kunt zien dat het zich onder de tekst in het blok bevindt inhoud. Maar we wilden dat het nieuwsblok zich aan de rechterkant zou bevinden en dat de tekst er links omheen zou vloeien.
Waarom is het bij ons niet gelukt? Omdat ons blok nieuws in de html-code bevindt zich onder de tekst en alleen de tekst die zich daaronder bevindt, zal eromheen vloeien. Om dit op te lossen moeten we onze div="nieuws" boven de tekst (dus vóór het woord "inhoud"):
Blok positionering
koptekst van de site
nieuws blok
Inhoud
onderaan de site
Nu staat ons nieuwsblok op zijn plaats:

En zodat het niet dicht bij de boven- en rechterrand drukt, voegen we een margewaarde toe voor dit blok:
#news( achtergrond:geel; breedte:150px; hoogte:280px; float:rechts; marge:10px; )
Nu hebben we hetzelfde resultaat bereikt als met absolute positionering.

Ben het ermee eens dat het gebruik van zwevende blokken gemakkelijker is om een ​​pagina op te maken: je hoeft geen pixels te tellen en de code is korter. Bovendien kunnen we met een “vloeiende” lay-out de exacte locatie van het blok op het scherm niet specificeren, en met behulp van zwevende blokken hebben we dit niet nodig, het is voldoende om alleen een oriëntatiepunt aan te geven (aan de linkerkant, rechts, onder of in dezelfde regel).
Vaste blokken
Zoals u zich herinnert, is het blok bij een vaste positionering gefixeerd ten opzichte van het kijkgebied. In sommige opzichten lijken vaste blokken op frames. Scrollen is alleen mogelijk binnen een frame, maar niet binnen een blok.
Vaste blokken hebben één belangrijk nadeel: ze worden niet ondersteund door Internet Explorer-browsers. Daarom mogen ze voorlopig niet worden gebruikt. Daarom zullen we hier alleen de syntaxis van een dergelijke regel aangeven als u deze zelf wilt proberen (bijvoorbeeld in de Opera-browser).
#blok( positie:vast; links:0px; boven:0px; )
Het blok met de identificatie "blok" blijft op zijn plaats tijdens het scrollen door de pagina.
Dat is alles voor vandaag. In de volgende les zullen we kennis maken met nog meer eigenschappen van blokken en hun typen.
Een blokelement in HTML is een element dat standaard de gehele breedte van het bovenliggende element beslaat. Het bovenliggende element kan een ander blokelement zijn, of een browservenster. U kunt de breedte en hoogte van een blokelement instellen met behulp van CSS-eigenschappen. Het positioneren van blokelementen is het proces waarbij ze binnen het browservenster worden gepositioneerd en relatief ten opzichte daarvan, met behulp van de CSS-eigenschappen position, left, top, right en bottom. De CSS-positie-eigenschap is ontworpen om een ​​van de vier beschikbare typen positionering in te stellen: statisch (standaard), absoluut, vast en relatief. De overige CSS-eigenschappen, namelijk left , top , right en bottom , zijn bedoeld om afstanden in te stellen ten opzichte van de linker-, boven-, rechter- en onderrand van het bovenliggende element. Ook kunnen blokelementen bij het instellen van bepaalde eigenschappen elkaar overlappen, en deze functie kan ook op websites worden gebruikt.
Standaardpositionering (statisch)
Als u geen positie voor een blokelement hebt opgegeven of statisch hebt opgegeven, wat hetzelfde is, worden de blokelementen op volgorde gerangschikt. Bovendien bevindt het volgende blok (bijvoorbeeld: rood) zich op een nieuwe lijn. Ook wordt deze positionering niet beïnvloed door het instellen van de afstanden links, boven, rechts en onder.



Absolute positionering (absoluut)
Bij absolute positionering wordt de positie van een element opgegeven ten opzichte van de randen van het browservenster met behulp van afstanden die zijn opgegeven door de eigenschappen left , top , right en bottom. Als je de afstanden links en rechts tegelijkertijd opgeeft, en deze conflicteren met elkaar, dan wordt de voorkeur gegeven aan links, hetzelfde geldt voor boven en onder, waarbij de afstand boven voorrang heeft. Absolute positionering wordt heel vaak gebruikt in combinatie met relatieve positionering voor ontwerpdoeleinden, wanneer het nodig is om verschillende elementen ten opzichte van elkaar te plaatsen; het kan ook worden gebruikt om vervolgkeuzemenu's, site-indeling, enz. te maken.




Vaste positionering
Vaste positionering verschilt van andere soorten positionering en beweegt niet mee met de inhoud terwijl u door de pagina scrollt. Blokelementen met een vaste positie worden verankerd met behulp van de eigenschappen left , top , right en bottom aan de randen van het browservenster. Vaste positionering wordt gebruikt om frame-interfaces te creëren (het browservenster is verdeeld in verschillende gebieden), een vast menu, een vaste voettekst van de site en “permanente” blokken (lijst met links, sociale knoppen, enz.).




Relatieve positionering
De relatieve positionering wordt gespecificeerd door de afstanden links, boven, rechts en onder op te geven ten opzichte van de huidige positie.




Deze blokpositie kan echter ook met de marge-eigenschap worden gecreëerd.



Relatieve positionering is op zichzelf niet leuk, maar wordt meestal gebruikt in combinatie met absolute positionering.
Laten we de opties bekijken:


Ze werken met alle gepositioneerde elementen behalve statische elementen.
Positioneringsvoorbeeld.
Elementen kunnen elkaar overlappen!
Een element boven de rest weergeven!
De eigenschap position heeft 4 waarden: statisch, vast, relatief en absoluut. Elk van deze betekenissen zal hieronder worden gedemonstreerd met een gebruiksvoorbeeld.
Voordat we alle soorten positionering van elementen op een pagina in detail onderzoeken, zullen we moeten overwegen wat documentstroom is.
Documentstroom
Standaard worden elementen op een webpagina weergegeven in de volgorde waarin ze in het HTML-document verschijnen, dat wil zeggen dat blokelementen de volledige beschikbare breedte in beslag nemen en verticaal onder elkaar worden gestapeld. Inline-elementen worden horizontaal uitgelijnd totdat de gehele beschikbare breedte bezet is, nadat de gehele breedte bezet is, wordt er een regeleinde gemaakt en begint alles opnieuw. Deze rangschikking van elementen wordt genoemd normale stroom(ook wel genoemd documentstroom of algemene stroom).
U kunt de eigenschap float of position gebruiken om een ​​element uit de normale stroom te verwijderen. Als een element uit de normale stroom "valt", worden elementen die zich in de code onder dat element bevinden, naar hun plaats op de webpagina verschoven.
Statische positionering
Statisch is de standaardpositionering voor alle elementen op een webpagina. Als u de eigenschap position niet op een element toepast, zal het statisch zijn en op de webpagina verschijnen volgens de algemene stroom van elementen.
Wanneer u de CSS-eigenschappen top , left , right of bottom toepast op een statisch gepositioneerd element, worden deze genegeerd.
Indien nodig kunt u de statische positionering in het stijlblad instellen met behulp van de statische waarde:
Eerste paragraaf.
Tweede paragraaf.


Poging "
Vaste positionering
Elementen met een vaste positionering bevinden zich op de pagina ten opzichte van het browservenster. Dergelijke elementen worden uit de algemene stroom verwijderd. Elementen die het vaste element in de stroom volgen, negeren het, verplaatsen zich en nemen hun plaats in op de webpagina.
Het is de moeite waard om aandacht te besteden aan het feit dat elementen met een vaste positionering andere elementen kunnen overlappen, waardoor deze geheel of gedeeltelijk worden verborgen. Bij het scrollen door lange pagina's creëren ze het effect van bewegingloze objecten die op dezelfde plaats blijven:

Tekst Tekst Tekst Tekst Tekst Tekst Tekst Sommige tekst Tekst Tekst Tekst Tekst Tekst


Poging "
Relatieve positionering
Relatief gepositioneerde elementen blijven, net als statische elementen, in de algemene stroom. Wanneer u de eigenschappen top , left , right of bottom toepast op relatief gepositioneerde elementen, zullen deze bewegen ten opzichte van hun locatie, waardoor er lege ruimte overblijft op de plek waar het element zich oorspronkelijk bevond.
Dergelijke elementen hebben geen invloed op de positie van de omringende elementen; de overige elementen blijven op hun plaats en kunnen worden overlapt door een relatief gepositioneerd element:
Titel van het eerste niveau.
Relatief gepositioneerde titel.
Kop van het derde niveau.


Poging "
Opmerking: Elementen met relatieve positionering (relatief) worden meestal gebruikt als ouder voor elementen met absolute positionering (absoluut).
Absolute positionering
Absoluut gepositioneerde elementen worden volledig uit de totale stroom verwijderd, de overige elementen nemen de vrije ruimte in beslag, waarbij absoluut gepositioneerde elementen volledig worden genegeerd. Vervolgens kunt u het element waar u maar wilt op de webpagina plaatsen met behulp van de eigenschappen top , left , right of bottom.
Alle absoluut gepositioneerde elementen worden relatief gepositioneerd ten opzichte van het browservenster of relatief ten opzichte van de dichtstbijzijnde gepositioneerde voorloper (als die er is) die de position-eigenschap absolute , fixed of relatieve heeft.

Laten we de locatie van het logo wijzigen met behulp van absolute positionering.
Het logo bevindt zich nu in de rechterbovenhoek van de pagina.


Poging "
Overlappende elementen
Wanneer elementen zich buiten de algemene stroom van de pagina bevinden, kunnen ze elkaar overlappen. Normaal gesproken komt de volgorde van de elementen overeen met hun volgorde in de HTML-code van de pagina. Het is echter mogelijk om de volgorde van de overlap te bepalen met behulp van de CSS-eigenschap z-index. Hoe hoger de waarde, hoe hoger het element zal zijn.
z-index: 1;
z-index: 0;
z-index: 2;