CSS - blokpositionering. Absolute en relatieve positionering

Een blokelement in HTML is een element dat standaard de volledige breedte in beslag neemt. ouderelement. 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 en ten opzichte daarvan worden gepositioneerd. met behulp van CSS eigenschappen positie, links, boven, rechts en onder. Eigendom CSS-positie is bedoeld om een ​​van de vier te specificeren beschikbare soorten positionering: statisch (standaard), absoluut, vast en relatief. Rest CSS-eigenschappen, namelijk links, boven, rechts en onder zijn bedoeld om afstanden ten opzichte van links, boven, rechts en te specificeren onderste rand ouderelement. Ook kunnen blokelementen elkaar overlappen bij het instellen van bepaalde eigenschappen, en deze kans hetzelfde kan 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 bij nieuwe lijn. Ook op deze positionering Het instellen van de afstanden links, boven, rechts en onder heeft geen effect.

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 positionering 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 worden aangemaakt met marge-eigenschappen(streepjes).

Relatieve positionering is op zichzelf niet leuk, maar wordt meestal gebruikt in combinatie met absolute positionering.

Laten we de opties bekijken:

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

U mag de eigenschap float en een ander positioneringstype dan statisch (dat wil zeggen het standaardtype) niet tegelijkertijd op een element toepassen.

Absolute positionering

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.

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:

Relatieve positionering

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:

z-index eigenschap

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:

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.

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.

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 we zullen het ze vragen verschillende betekenissen eigenschappen 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; )

Dan zal het tweede blok tegen de rechterrand van het eerste blok drukken:

De situatie zal vergelijkbaar zijn wanneer identieke 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 er tegenaan 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 worden ingesteld op een van de vier waarden:

• 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.

#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 aan de linkerkant 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 aangeven, en met behulp van zwevende blokken hebben we dit niet nodig, het volstaat om alleen een oriëntatiepunt aan te geven (aan de linkerkant, op rechts, onder of in dezelfde lijn).

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 er één aanzienlijk nadeel: ze worden niet ondersteund Internetbrowsers Ontdekkingsreiziger. 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.

Stel je voor dat een webontwikkelaar helemaal niet hoeft na te denken over hoe het er visueel uit komt te zien voltooide pagina. Hij schrijft eenvoudig de code, de elementen zelf staan ​​op de pagina, van boven naar beneden (blok) en van links naar rechts (inline). Hoe hoger in het document de code wordt geschreven, hoe hoger deze op de pagina verschijnt.

Over het algemeen zullen we het natuurlijke gedrag van de elementen zien, en de volgorde waarin ze op de pagina worden weergegeven: de stroom van het document. Maar wij zijn helemaal niet blij met deze bestelling; wij willen het logo links plaatsen bovenste hoek en de knop bevindt zich iets naar rechts. Wij hebben nodig volledige controle over alle elementen beslissen we waar en wat er zal komen. En hiervoor heb je een tool (eigenschap) nodig die het normale gedrag van elementen in de stroom verandert. Wat voor onroerend goed is dit?

IN CSS stijlen, dit wordt positionering genoemd (positie), wat misschien gewoon is (statisch), relatief (relatief) en absoluut (absoluut).

Relatieve positionering in CSS

Bij relatieve positionering, beweegt het blok ten opzichte van zijn startpositie. Nadat u echter naar het blok hebt geschreven:

Positie: relatief;

er zal niets gebeuren, het zal op zijn plaats blijven. En het coördinatensysteem verplaatst het blok (boven, onder, links, rechts), met zowel positieve als negatieve waarden.

Hoe werkt dit?

Binnen een geel blok met een klas blok-geel er is een rood blok met een klasse blok-relatief. In een normale stroom overlapt het rode blok het gele, omdat het als laatste in de code wordt geschreven.

We moeten het rode blok 10 pixels naar beneden verplaatsen. Dit kan alleen worden gedaan door de positie van het rode blok met geweld te veranderen. Zo schrijven wij het boven: 10px, maar u moet aangeven vanaf welk punt deze 10 pixels moeten worden geteld?

Na geregistreerd te zijn positie: relatief, maken we duidelijk dat de telling relatief is ten opzichte van de huidige positie.

Blok-geel (
achtergrondkleur: #ffe70f;
}

Blok-relatief (
positie: relatief;
boven: 10px;
achtergrondkleur: #ed5b77;
}

Op de afbeelding zien we hoe het rode blok naar beneden is bewogen, 10 pixels lager dan de oorspronkelijke positie.

Als je het uit de code verwijdert positie: relatief, dan blijft het blok op zijn plaats. Wat als in plaats daarvan relatief, schrijven absoluut, dan worden deze 10 pixels standaard geteld vanaf de rand van het browservenster en als gevolg daarvan zal ons blok daarentegen omhoog komen en de onderkant van de browser bereiken. En dit maakte geen deel uit van onze plannen.

Absolute positionering in CSS

Op de foto staat een blok absoluut gepositioneerd, dit is wanneer het coördinatensysteem wordt geteld vanaf de rand van de browser. Door slechts één woord te vervangen, hebben we de positie van het blok gewijzigd.

Positie: absoluut;

Er is één bijzonderheid. Absolute positionering heeft ook invloed op inline-elementen. Als het inline-element is opgegeven positie: absoluut, dan zal het zich gedragen als een blok. Dit is analoog aan de eigenschap - weergave: blok.

Dat is nog niet alles: het "absolute" element dat zich binnen de "relatieve" ouder bevindt, verandert zijn coördinaatreferentiepunt en begint weg van de ouder te worden gepositioneerd.

Blok met klasse blok-absoluut binnen de ouder zijn blok-geel.

Blok-geel (
positie: relatief;
opvulling: 10px;
achtergrondkleur: #ffe70f;
}

Omdat het gele blok dat heeft gedaan relatieve positionering, dan het rode blokje met absolute positionering, verschuift ten opzichte van rood met opgegeven pixels.

Blok-absoluut (
positie: absoluut;
onderkant: 10px;
links: 10px;
achtergrondkleur: #ed5b77;
}

Vaste positionering

Bij het scrollen van een pagina verschijnt een blok met positie: vast, blijft op zijn plaats, deze methode wordt meestal gebruikt om de navigatiebalk te repareren.

z-index

Lost de volgorde op van overlappende "absolute" blokken. Het rode blokje moeten we bovenop het gele blokje hebben, dan geven we aan z-index: 2 voor rood en z-index: 1 voor geel.

Blok-rood (
positie: relatief;
z-index: 2;
achtergrondkleur: #ffe70f;
}

Blok-geel (
positie: absoluut;
boven: 20px;
z-index: 1;
achtergrondkleur: #ed5b77;
}

Bij het werken met tekst kan het zijn dat de gebruiker zinnen of hele alinea's moet verwisselen of fragmenten op een niet-standaard manier moet rangschikken. Verplaats een tekstblok naar Microsoft-applicatie Kantoorwoord op meerdere manieren mogelijk.

Instructies