Positie ten opzichte van - wat is dat? gedetailleerde beschrijving

Nesting HTML - een langdurig proces, rigoureus, maar zeer creatief. Ondanks het feit dat voor de meerderheid van de mensen werkzaam in de IT, kan webpagina's layout saaie routine lijken, specialisten die een roeping voor een dergelijk geval, niet alleen kwalitatief uitvoeren van de taak, maar ook te ontvangen van het proces van materiële plezier.

Echter, voordat u een ervaren programmeur te worden, elke nieuwkomer besteedt veel tijd aan het bestuderen van de verschillende instructies en specificaties van zowel de HTML-taal, en op zijn bondgenoot - CSS. Over precies wat CSS, wat het is en wat "schijnbeweging oren" stelt u in staat om op te staan, evenals een van de top eigenschappen - Positie gerelateerd - Vandaag gaan we praten.

Wat is CSS?

CSS Afkorting kan worden getranscribeerd en vertaald in het Russisch als "cascading style sheets". Het klinkt vreemd - aan de ene kant lijkt het duidelijk, en woorden, en aan de andere kant - de algemene betekenis niet onmiddellijk gevangen. Laten we beginnen met de eenvoudige - met stijl. Deze technologie stelt u in staat om objecten op de pagina, bepaalde kenmerken te bevestigen met betrekking tot de schijn dat u slechts één keer kan registreren en gebruiken een oneindig aantal keren.

Het woord "tafel" in de officiële vertaling verscheen bijna per ongeluk - in feite beter hier zou zijn om het woord "lists" of "lijst" te gebruiken, maar de auteurs van de oorspronkelijke vertaling besloten dat de CSS lijkt op meer dan een lijst, en wie we zijn dat is nu om te proberen hen.

Ten slotte is het woord "Cascade." Immers elk element verschillende stijlen die kunnen worden gemengd of overlap hebben. In dergelijke gevallen, de browser heeft toevlucht nemen tot een set van regels, met het oog op het uiterlijk van het blok, die bleek te zijn verschillende stijlen zijn, met een van hen, bijvoorbeeld, heeft een Positie gerelateerd eigendom, en de andere samenstellen - Positie Absolute. In feite kunnen dergelijke conflicten niet worden getolereerd, maar in grote projecten gebeurt zoveel verwarring heel vaak.

Dus nu, als alles blijkt uit de naam, laten we eens kijken naar een eenvoudig voorbeeld. Laten we zeggen dat uw site moet een groot aantal knoppen, ontworpen op een bepaalde manier te zijn. Ze hebben eigenschappen zoals grootte, schaduw, dekking, kleur. Natuurlijk kunt u deze parameters op te geven, het creëren van elke knop, maar is veel gemakkelijker te CSS gebruiken. In de praktijk moet je een bepaalde klasse, waarin de waarden van alle bovengenoemde eigenschappen lijsten te beschrijven, en dan, in plaats van een lange lijst, zal het label van elke knop hoeft alleen maar de naam van de klasse te geven, dan is de browser zelf zullen deze elementen in de gewenste kleur en geef ze een goede "gloss".

Wat doet de eigenschap Position?

We direct doorgaan nu aan de eigenschap Position, ter wille van die dit hele artikel is gestart. Als u bekend met het Engels, of hebben een goede intuïtie, dan moet je al duidelijk zijn - deze eigenschap is verantwoordelijk voor de locatie van het item. In feite is de manier waarop het is, maar de specifieke locatie in plaats daarvan te bepalen, deze eigenschap vertelt de browser hoe het moet worden geplaatst een of ander element met betrekking tot aangrenzende of over de pagina als geheel.

Welke waarden kan de eigenschap Position?

Onze woning kunnen vele verschillende waarden aannemen, zijn er slechts vijf. Hier is een korte beschrijving van elk:

• Position Erf. Met deze functie kunt u de gegevens over de positie van het element dat een ouder te kopiëren. Bijvoorbeeld, als u een div met een gespecificeerde Positie gerelateerd, dan in het aangaan met IMG erven waarde zal ook worden ingesteld op Relative.
• Plaats Static. Deze waarde wordt gegeven aan alle elementen automatisch, tenzij anders aangegeven niet meer. De elementen zijn plaats vastzit zoals vermeld in de code en zijn niet beschikbaar voor een verscheidenheid aan "franjes", waardoor hun positie veranderen.
• Positie Absolute. Door deze waarde de eigenschap Position wordt vaak gebruikt in gevallen waarin het noodzakelijk is om een "zwevende" element te creëren. Bij een gegeven waarde van het onroerend goed item is "onzichtbaar" voor de andere componenten van de pagina. Dat wil zeggen, ze zijn gerangschikt als onze absolute element bestaat niet. Hijzelf zal altijd op zijn plaats, ongeacht hoe ver is gescrold pagina.
• Positie vast. In veel opzichten is deze waarde gelijk aan de voorgaande, echter, terwijl de absolute element is gebonden aan de bovenliggende, vaste gebruik alleen de coördinaten van de linkerbovenhoek van het browservenster, het negeren van de rest van de elementen daaraan voorafgaande.
• Tenslotte positie ten opzichte van. Dergelijke waarden maakt positionering ten opzichte van het andere, die bruikbaar zijn voor het maken van een adaptieve markering genaamd gemeen "rubber" kan zijn. Met deze eigenschap, zal het item "push" de andere, zonder verlies van de mogelijkheid om hun positie op de pagina te wijzigen.

Werken met Positie in verschillende browsers

Niet alle browsers zijn even geschikt. Terwijl de meeste alternatieve programma's voor het surfen op het internet, zonder enige haperingen gepercipieerde waarde van standpunt is absoluut waar, "chronisch speciale» Internet Explorer beschouwt de woning, afhankelijk van de versie.

Bijvoorbeeld met behulp van de reeds "begraven" de browser IE6, kunt u geen gebruik maken van de waarde van vaste en overnemen - "ezel" ze gewoon negeren. Echter, ondanks het feit dat de zevende versie van de situatie begon te verbeteren, en Vaste reeds verwerkte, aan geliefde "erven browser om andere browsers te downloaden," alleen bereikt in zijn achtste incarnatie.

De rest van de waarnemers rustig omgaan positie met de eerste versie, met uitzondering van de Opera, dat de steun van de eigenschappen heeft in zijn 4 variaties, gepubliceerd in het midden van de jaren '90.

Werken met Positie in Javascript

In feite is het verhaal van hoe te werken met de eigenschap Positie in Javascript is, hebben we alleen in het belang van het fatsoen inbegrepen. Omdat deze accommodatie heeft geen speciale tekens in de titel, kunt u de JS gebruiken zonder enige veranderingen, bijvoorbeeld om de div Positie gerelateerd te stellen, moet een lijn als deze zijn onder andere: div.style.position = 'relatieve'.

Zoals u kunt zien, het is vrij eenvoudig.

Waarom Positie gerelateerd speciale aandacht verdient?

Terwijl de meeste van de waarde van onroerend goed positie, op zijn zachtst gezegd, "spuwde" op de omringende elementen, met behulp van de waarde "stijl position: relative", moet altijd onthouden over de hele pagina als geheel, omdat oneigenlijk gebruik kan sterk "skew" de volledige inhoud van het scherm .

In Daarnaast heeft dit gebouw kunt u alleen eenvoudig converteren vaste ontwerp adaptieve, omdat de toepassing ervan automatisch van invloed op alle content pagina's. Dan hebben we nog tijd om de voorbeelden en fouten met behulp van deze waarde te overwegen, en je zal de materiële betekenis in de praktijk te zien.

Wanneer moet u relatieve positionering gebruiken?

In aanvulling op de klassieke lay-out van de pagina's HTML, Positie gerelateerd vaak gebruikt om een verscheidenheid aan interessante effecten te creëren. Bijvoorbeeld, als u een punt wilt "kwam" op een pagina of, integendeel, geleidelijk verder ging dan zijn grondgebied, het is juist deze eigenschap kan helpen deze "truc" uit te voeren.

Deze "trucs" worden uitgevoerd door middel van Javascript is, of, als je doel voor de geleidelijke invoering, door de eigenschappen van CSS3, die u toelaten om de cyclische verandering in de waarde van een bepaalde variabele aan te passen.

Daarnaast is in sommige gevallen mogelijk om het scheppen van "hybride" waarden Positie gerelateerd. CSS, maar niet op hetzelfde moment kunt u iets als positie in te stellen: absolute familielid, maar met behulp van een paar trucjes, is het nog steeds mogelijk om dit effect te bereiken. Deze benadering kan nuttig zijn in gevallen waarin u nodig hebt om iets complex als creëren een tooltip of pop-up menu. Gezien de voorbeelden, zullen we een beschrijving van de structuur van dergelijke geven "hybride".

Voorbeelden van gebruik van de relatieve ranking

Positie ten opzichte van - het is vrij eenvoudig, maar flexibele tool die u toelaat om een verscheidenheid aan interessante effecten te implementeren. Om geen tijd te verliezen en plaats om nutteloze code sjabloon te schrijven, presenteren we een aantal mondelinge algoritmes, die uw site of specifieke pagina's kunnen versieren.

Laten we beginnen met een "run out" lijn. Stel je hebt een behoefte aan een element dat zal "reizen", omdat de linkerkant van het scherm en langzaam verplaatsen naar de rechterkant. Een dergelijk "mechanisme" opstelling zou uitvoert,: relatieve; Links: -100px, waarbij -100 - het geschatte aantal van de pixels die het blokbreedte. Deze stijl zal u toelaten om het apparaat buiten het scherm te verbergen, te plaatsen in de "startpositie". Nu kunt u een script dat elke paar milliseconden eigenschap left waarde per eenheid, zolang het niet gelijk aan de breedte van het browservenster minus de breedte van het element geworden zal toenemen gebruiken. Het resultaat is een eenheid die uit de linkerrand komt, rolde over het scherm en "geparkeerd" in zijn rechterhand.

Een ander voorbeeld stelt u in staat om "relatieve-absolute" elementen te creëren. Bijvoorbeeld, kunt u een absolute invoeren in een andere, met Positie gerelateerd. Als gevolg hebben we een "relatief" blok dat niet de grootte waarmee de absolute ingeschreven heeft, kan nu manifesteren in staat onafhankelijk van het voorgaande element.

Typische fouten bij gebruik Positie gerelateerd

De meest voorkomende fout bij gebruik van de Positie gerelateerd is dat veel webdesigners vergeten over de mogelijkheid om een plaats te reserveren in de eenheid, die overal kan worden geplaatst. Bijvoorbeeld, als u een vrij grote, buiten het scherm en een relatieve positie geplaatst, in plaats daarvan zal een gapende "gat" zijn. Maar zelfs deze eigenschap soms leidt tot bepaalde ongemakken kan voor goed, bijvoorbeeld tot een interessant effect van "zelf-assemblage" van de plaats waar al de blokken geleidelijk in de bovenste stand worden gebracht: 0; left: 0; t. e. de oorspronkelijke locatie.