CSS-positionering: absoluut, relatief. CSS - blokpositionering

Ze werken met alle gepositioneerde elementen behalve statische elementen.

Positioneringsvoorbeeld.

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.

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 beslaan 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 een regeleinde gemaakt en begint alles opnieuw. Deze rangschikking van elementen wordt de normale stroom genoemd (ook wel documentstroom of algemene stroom genoemd).

Statische positionering

Statisch is de standaardpositionering voor alle elementen op een webpagina. Als u de position-eigenschap niet op een element toepast, zal het statisch zijn en op de webpagina verschijnen volgens de algemene stroom van elementen. Bij met behulp van CSS

eigenschappen top , left , right of bottom aan een statisch gepositioneerd element toewijzen, worden deze genegeerd.

Indien nodig kunt u de statische positionering in het stijlblad instellen met behulp van de statische waarde:

Documenttitel p (positie: statisch; )

Eerste paragraaf.

Vaste positionering

Elementen met een vaste positionering bevinden zich op de pagina ten opzichte van het browservenster. Dergelijke elementen worden uit de algehele 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. Tijdens het scrollen creëren ze het effect van bewegingloze objecten die op dezelfde plaats blijven:

Documenttitel img (positie: vast; boven: 5%; links: 40% ) Tekst Tekst Tekst Tekst Tekst Tekst Tekst Sommige tekst Tekst Tekst Tekst Tekst Tekst Probeer »

Elementen met relatieve positionering, zoals statische elementen, blijf 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:

Documenttitel h2 (positie: relatief; bovenaan: 30px; ) Kop van het eerste niveau.

Relatief gepositioneerde titel.

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 overal plaatsen

juiste plaats

webpagina's 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.

Documenttitel div ( positie: absoluut; breedte: 100px; hoogte: 100px; ) .div1 ( achtergrondkleur: #66FFFF; links: 70px; boven: 0px; z-index: 1; ) .div2 ( achtergrondkleur: # FFFF66; links: 0px; z-index: 0; .div3 (achtergrondkleur: #66FF66; links: 33px; z-index: 2; )

z-index: 0; z-index: 2; Positionering is er één van sleutelconcepten V blok indeling. Als je het eenmaal begrijpt, wordt je veel duidelijk en verandert de inrichting van sjamanisme in een betekenisvol proces. Dit artikel zal zich dus concentreren op CSS-eigenschappen. positie.

vlot

1. positie: statisch

Standaard hebben alle elementen op de pagina een statische positionering (positie: statisch), wat betekent dat het element niet is gepositioneerd en op de gebruikelijke plaats in het document verschijnt, dat wil zeggen in dezelfde volgorde als in de html-opmaak.

#content( positie: statisch; )

2.positie: relatief

Met relatieve positionering (positie: relatief) kunt u de eigenschappen boven, onder, links en rechts gebruiken om een ​​element te positioneren ten opzichte van waar het zou verschijnen als het normaal zou worden geplaatst.

Laten we #content 20 pixels naar beneden en 40 pixels naar links verplaatsen:

#content( positie: relatief; boven: 20px; links: -40px; ) Merk op dat er nu lege ruimte is waar ons #content-blok zou hebben gestaan. Na het #content-blok is het #footer-blok niet naar beneden verplaatst omdat #content nog steeds zijn plaats in het document inneemt, ook al hebben we het verplaatst. Op in dit stadium het lijkt misschien zo

niet zo handig, maar trek niet te snel conclusies, verderop in het artikel zul je ontdekken waarvoor het kan worden gebruikt.

3. positie: absoluut

Bij absolute positionering (positie: absoluut) wordt het element uit het document verwijderd en verschijnt het op de plek waar u het aangeeft.

Laten we bijvoorbeeld het blok #div-1a naar de rechterbovenhoek van de pagina verplaatsen: #div-1a ( positie:absoluut; boven:0; rechts:0; breedte:200px; ) Merk op dat deze keer, omdat het #div-1a blok uit het document is verwijderd, de resterende elementen op de pagina anders zijn gepositioneerd: #div-1b, #div-1c en #footer zijn naar boven verplaatst, in plaats van het verwijderde blok . En het blok #div-1a zelf bevindt zich precies aan de rechterkant,

Op deze manier kunnen we elk element relatief ten opzichte van de pagina positioneren, maar dit is niet voldoende. In feite moeten we #div-1a positioneren ten opzichte van het bovenliggende #content-blok. En op dit punt komt de relatieve positionering weer in het spel.

Vaste positionering (positie: vast) is een onderafdeling van absolute positionering. Het enige verschil is dat het zich altijd in het zichtbare gedeelte van het scherm bevindt en niet beweegt tijdens het scrollen over de pagina. Wat dat betreft lijkt het een beetje op een vaste achtergrondafbeelding.

#div-1a ( positie:vast; boven:0; rechts:0; breedte:200px; )

In IE met positie: vast, niet alles verloopt zo soepel als we zouden willen, maar het bestaat vele manieren omzeil deze beperkingen.

Door een relatieve positie toe te wijzen aan het #content-blok (positie: relatief), kunnen we alle onderliggende elementen positioneren ten opzichte van de grenzen ervan. Laten we een #div-1a-blok in de rechterbovenhoek van het #content-blok plaatsen.

#content ( positie:relatief; ) #div-1a ( positie:absoluut; boven:0; rechts:0; breedte:200px; )

Gewapend met de kennis uit de voorgaande stappen kunt u proberen twee kolommen te maken met behulp van relatieve en absolute positionering.

#content ( positie:relatief; ) #div-1a ( positie:absoluut; boven:0; rechts:0; breedte:200px; ) #div-1b ( positie:absoluut; boven:0; links:0; breedte:200px ;)

Een van de voordelen van absolute positionering is de mogelijkheid om elementen in willekeurige volgorde te plaatsen, ongeacht hoe ze zich in de markup bevinden. In het bovenstaande voorbeeld wordt het #div-1b-blok vóór het #div-1a-blok geplaatst.

En nu zou je een vraag moeten hebben: "Waar zijn de rest van de elementen uit ons voorbeeld gebleven?" Ze verstopten zich onder perfect geplaatste blokken. Gelukkig is er een manier om dit op te lossen.

Eén oplossing is om de container met de kolommen een vaste hoogte te geven.

#content ( positie: relatief; hoogte: 450px; ) #div-1a ( positie:absoluut; boven:0; rechts:0; breedte:200px; ) #div-1b ( positie:absoluut; boven:0; links:0 ;breedte:200px;

De oplossing is niet erg geschikt, omdat we van tevoren nooit weten hoe groot de tekst in de kolommen zal komen te staan ​​en welk lettertype zal worden gebruikt.

Voor luidsprekers met variabele hoogte, absolute positionering werkt niet, dus laten we naar een andere optie kijken.

Door een vlotter aan het blok toe te wijzen, duwen we het zo ver mogelijk naar de rechter (of linker) rand, en de tekst die het blok volgt, zal er omheen vloeien. Deze techniek wordt meestal gebruikt voor afbeeldingen, maar we zullen deze voor meer gebruiken moeilijke taak, omdat dit het enige instrument is waarover wij beschikken.

#div-1a ( zweven:links; breedte:200px; )

Als we float: left toekennen aan het eerste blok en vervolgens float: left to the second, wordt elk blok naar de linkerrand geduwd en krijgen we twee kolommen met variabele hoogte.

#div-1a ( zwevend:links; breedte:150px; ) #div-1b ( zwevend:links; breedte:150px; )

U kunt ook de tegenovergestelde float-waarde aan de kolommen toewijzen, in welk geval ze langs de randen van de container worden verdeeld.

#div-1a ( zwevend:rechts; breedte:150px; ) #div-1b ( zwevend:links; breedte:150px; )

Maar nu hebben we nog een probleem: de kolommen strekken zich uit voorbij de bovenliggende container, waardoor de hele lay-out wordt verbroken. Dit is het meest voorkomende probleem voor beginnende lay-outontwerpers, hoewel het vrij eenvoudig kan worden opgelost.

Het reinigen van vlotters kan op twee manieren. Als na sprekers komen nog een blok, wijs het gewoon duidelijk toe: beide.

#div-1a ( zwevend:links; breedte:190px; ) #div-1b ( zwevend:links; breedte:190px; ) #div-1c ( helder:beide; )

Of wijs de eigenschap overflow: verborgen toe aan de bovenliggende container

#content (overflow:verborgen; )

Het resultaat zal in ieder geval hetzelfde zijn.

Alleen vandaag beoordeeld basistechnieken positionering, en het meest eenvoudige voorbeelden. Om beginnende lay-outontwerpers te helpen, raad ik ook altijd een reeks artikelen van Ivan Sagalayev aan, die me ooit enorm hebben geholpen.

Het positioneren van CSS-blokken is er één van de belangrijkste fasen lay-out, omdat dit de aanpasbaarheid van de site of de mogelijkheid van implementatie ervan in de toekomst beïnvloedt (als op dit moment niet vereist), en heeft ook een aanzienlijke impact op de verdere schaalvergroting van het terrein. Het is niet ongebruikelijk dat ‘aspirant-lay-outontwerpers’ zo’n lay-out maken dat het uiteindelijk gemakkelijker is om deze weg te gooien dan om iets te veranderen, maar tegelijkertijd kan deze er volledig in overeenstemming met de lay-out uitzien. Deze situatie ontstaat als gevolg van een gebrek aan begrip van waar en wanneer dit of dat type positionering moet worden gebruikt. Vandaag zullen we proberen erachter te komen deze kwestie. En dus is er in CSS een position-eigenschap.

• Deze eigenschap kan 5 waarden aannemen, maar we zullen de 4 belangrijkste overwegen:
• absoluut
• statisch
• relatief

De eerste positioneringsmethode op onze lijst is absoluut. Op afspraak van dit pand, wordt het blok zijn eigen eenheid en heeft de rest van de pagina-elementen geen invloed op de locatie ervan, en heeft het ook geen invloed op andere elementen. De blokgrootte wordt bepaald door de breedte- en hoogte-eigenschappen, en de locatie op de pagina wordt bepaald door de bovenste eigenschappen. links, rechts en onder deze parameters specificeren de opvulling van boven, links, rechts en onderste rand. Als het blok dat niet heeft ouderelement, en ook als de positionering van het bovenliggende element anders is dan statisch, stellen de eigenschappen boven, links, onder en rechts de inspringingen in vanaf het begin van de pagina, anders vanaf de randen van het bovenliggende element.

Vaker dit type positionering wordt gebruikt wanneer een blok naar de rechter- of onderkant moet worden gedrukt. Laten we deze lay-out eens bekijken.

Voor het gemak zijn de blokken gemarkeerd met een veelkleurig kader. De opmaak ziet er als volgt uit:

XHTML

Relatie ( positie: relatief; ) .geel ( positie: absoluut; rechts: 10px; onder: 10px; )

In dit voorbeeld hebben we de eigenschappen Rechts en Onder gebruikt om de offset vanaf de rechter- en onderrand in te stellen. Deze eigenschapswaarden zijn gelijk aan de waarden bovenaan: Elementhoogte - 10px en links: Elementbreedte - 10px.

Ook wordt soms absolute positionering gebruikt wanneer het nodig is om het ene element op het andere te ‘impacten’.

Het meest voorkomende type positionering dat op elke pagina voorkomt en meestal voor de meeste elementen wordt ingesteld, is statisch, geschreven in css als statisch. Voor de meesten HTML-tags deze waarde is standaard gedefinieerd, d.w.z. als de positie niet expliciet is opgegeven, is de waarde statisch. Met deze opstelling worden de elementen onder elkaar uitgelijnd en zijn de coördinaten in het venster van elk element afhankelijk van de dichtstbijzijnde elementen met positie: statisch of positie: relatief. De eigenschappen bovenaan, links, rechts en onderaan werken niet met deze positionering; de positie wordt gewijzigd vanwege de marge-eigenschap.

Dit type positionering lijkt sterk op statische positionering, behalve dat de positie van het element kan worden gewijzigd door de eigenschappen boven, links, rechts, onder en marge.

Vaste positionering is vergelijkbaar met absolute positionering wat betreft de manier waarop coördinaten worden gespecificeerd, maar de locatie wordt niet relatief berekend HTML-pagina's, maar relatief ten opzichte van het browservenster, d.w.z. met de eigenschap top: 10px stelt u de bovenste inspringing gelijk aan 10px VANUIT HET BROWSERVENSTER en ongeacht op welk paginascrollniveau u zich bevindt, dit onderdeel volgt altijd met uw scherm.

Meestal gebruikt voor navigatie-elementen, zodat de gebruiker altijd alles kan zien belangrijke informatie of links naar interessante pagina's.

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 in een applicatie Microsoft Office Woord kan op verschillende manieren worden gedaan.

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, weergegeven op een punt met bepaalde coördinaten, vast op opgegeven locatie, bepaal de positie van het ene element ten opzichte van het andere, enz. 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 eigenschap position 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 worden op de pagina weergegeven in de volgorde waarin ze verschijnen broncode HTML.

De eigenschappen left , top , right en bottom worden, indien gedefinieerd, 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.
• Een laag verandert zijn oorspronkelijke positie niet tenzij deze de eigenschappen right , left , top en bottom heeft.
• De linker- en bovenste eigenschappen hebben meer hoge prioriteit vergeleken met rechts en onder. 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 , maar daar zullen we het over hebben verticale streep rol.
• 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 het schuift.

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 creëren

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, vang je de pilaf met een schuimspaan op in een heuveltje in het midden , 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 ingesteld op absolute positionering.

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.

Het resultaat van het voorbeeld wordt getoond in Fig. 3.45. Omdat de vaste voettekst de tekst overlapt en verbergt, is er een onderste opvulling toegevoegd voor de BODY-selector. IE6 ondersteunt de vaste waarde niet, dus dit voorbeeld zal daar niet correct werken.

Rijst. 3.45. Voettekst onderaan de pagina

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 het element 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 verplaatst ten opzichte van uitgangspositie blijft de ruimte die door het element wordt ingenomen leeg en wordt deze niet opgevuld 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 in essentie 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, zullen het coördinatensysteem en de positie veranderen kind-element in dit geval wordt het aangegeven ten opzichte van de ouder (Fig. 3.49).

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

Vanaf de coördinaten wordt geteld 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