Posisie relatief - wat is dit? gedetailleerde beskrywing

Nes HTML - 'n lang proses, streng, maar baie kreatief. Ten spyte van die feit dat vir die meerderheid van die mense in diens in IT, kan webblaaie uitleg vervelig roetine lyk, spesialiste wat 'n roeping vir so 'n geval, nie net kwalitatief uit te voer die taak, maar ook ontvang van die proses van tasbare plesier.

Maar, voordat jy 'n ervare kodeerder word, elke nuweling spandeer baie tyd die bestudering van die verskillende instruksies en spesifikasies van beide die HTML taal, en op sy bondgenoot - CSS. Oor presies wat CSS, wat dit is en wat "schijnbeweging ore" laat jou toe om op te staan, asook een van sy top eienskappe - posisie relatief - vandag sal ons praat.

Wat is CSS?

CSS staat kan getranskribeer en vertaal in Russies as "Cascading Style Sheets". Dit klink redelik vreemd - aan die een kant, blyk dit duidelik, en woorde, en aan die ander kant - die algemene betekenis is nie onmiddellik vasgevang. Kom ons begin met die eenvoudige - met styl. Hierdie tegnologie kan jy voorwerpe op die bladsy, sekere eienskappe heg met betrekking tot die voorkoms wat jy net een keer kan registreer en gebruik 'n oneindige aantal kere.

Die woord "tafel" in die amptelike vertaling verskyn amper per ongeluk - in werklikheid meer gepas hier sou wees om die woord "lyste" of "lyste" gebruik, maar die skrywers van die oorspronklike vertaling besluit dat die CSS lyk meer as 'n lys, en wie ons is so is nou aan hulle probeer.

Ten slotte, die woord "Cascade." Die feit is dat elke element verskeie style wat kan gemeng of selfs oorvleuel kan hê. In sulke gevalle, die leser het 'n beroep op 'n stel reëls, ten einde die voorkoms van die blok, wat blyk te wees 'n paar style wees, met een van hulle, byvoorbeeld, het 'n posisie relatief eiendom, en die ander komponeer - Posisie Absolute. Trouens, sulke konflikte is onmoontlik om te vermy, maar in groot projekte gebeur so verwarring dikwels.

So nou, wanneer alles is duidelik uit die naam, laat ons kyk na 'n eenvoudige voorbeeld. Kom ons sê jou webwerf moet 'n groot aantal knoppies, ontwerp in 'n sekere manier wees. Hulle het eienskappe soos grootte, skaduwee, ondeursigtigheid, kleur. Natuurlik, kan jy hierdie parameters spesifiseer, die skep van elke knoppie, maar is baie makliker om CSS gebruik. In die praktyk, moet jy 'n sekere klas, wat die waardes van al die bogenoemde eienskappe lys beskryf, en dan, in plaas van 'n lang lys, sal die etiket van elke knoppie net nodig het om die naam van die klas te spesifiseer, dan die leser self sal hierdie elemente in die gewenste kleur kleur en gee hulle 'n behoorlike "glans".

Wat beteken die eiendom Posisie?

Ons direk voort te gaan nou om die eiendom Posisie, ter wille van wat hierdie hele artikel is begin. As jy vertroud is met die Engelse taal is, of 'n goeie intuïsie, dan moet jy reeds duidelik te wees - hierdie eiendom is verantwoordelik vir die ligging van die item. Trouens, die manier waarop dit is nie, maar die spesifieke plek in plaas bepaal, hierdie eiendom vertel die leser hoe dit moet geplaas word op een of ander element met betrekking tot aangrensende of oor die bladsy as 'n geheel.

Watter waardes kan die eiendom Posisie?

Ons eiendom kan verskillende waardes te aanvaar, is daar slegs vyf. Hier is 'n kort beskrywing van elk:

• Posisie Erf. Hierdie funksie laat jou toe om die data op die posisie van die element wat 'n ouer kopieer. Byvoorbeeld, as jy 'n div met die gespesifiseerde posisie relatief, dit daarin geloop met IMG erwe waarde sal ook ingestel word om relatief.
• Posisioneer Static. Hierdie waarde word gegee aan al die elemente outomaties, tensy anders vermeld meer. Die elemente inpas posisie soos genoem in die kode en is nie beskikbaar vir 'n verskeidenheid van "tierlantyntjies", sodat hulle posisie verander.
• Posisie Absolute. Deur hierdie waarde die eiendom Position is dikwels gebruik in gevalle waar dit nodig is om 'n "drywende" element te skep. Met 'n gegewe waarde van die eiendom item is "onsigbare" vir die ander komponente van die bladsy. Dit wil sê, hulle gereël asof ons absolute element bestaan nie. Hyself sal altyd in plek, ongeag van hoe ver is scrolled bladsy.
• Posisie Vaste. Op baie maniere, hierdie waarde is soortgelyk aan die vorige een, maar terwyl die absolute element is gebind aan die ouer, vaste gebruike net die koördinate van die boonste linkerhoek van die leser skerm, ignoreer die res van die elemente wat dit voorafgegaan het.
• Ten slotte, posisie relatief. Hierdie tipe waardes kan posisionering element relatief tot die ander, wat nuttig vir die skep van 'n aangepaste merk genoem in gemeen "rubber" kan wees. Met hierdie eiendom sal die item "stoot" die ander, sonder die verlies van die vermoë om hul posisie op die bladsy verander.

Werk met Posisie in verskillende blaaiers

Nie alle blaaiers is ewe geskik. Terwyl die meeste alternatiewe programme vir Internet navigeer sonder enige haakplekke waargenome waarde van standpunt is absoluut waar, "kronies spesiale» Internet Explorer van mening dat die eiendom, afhangende van die weergawe.

Byvoorbeeld, met behulp van die reeds "begrawe" die leser IE6, jy kan nie die waarde Vaste en Erf - "donkie" hulle eenvoudig ignoreer dit. Maar, ten spyte van die feit dat die sewende weergawe van die situasie begin verbeter, en Vaste reeds verwerk, te geliefde beërwe "browser om ander blaaiers te laai," bereik net in sy agtste inkarnasie.

Die res van die waarnemers kalm hanteer posisie met die eerste weergawe, met die uitsondering van Opera, wat die ondersteuning van die eiendomme het in sy 4 variasies, gepubliseer in die mid-90s.

Werk met Javascript in posisie

Trouens, die verhaal van hoe om te werk met die eiendom Posisie in Javascript nodig is, ons het net ter wille van ordentlikheid ingesluit. Omdat hierdie eiendom vereis nie enige spesiale karakters in die titel het, kan jy die JS gebruik sonder enige veranderinge, byvoorbeeld, om die div posisie relatief stel, moet 'n lyn soos hierdie sluit in: div.style.position = 'relatiewe'.

Soos jy kan sien, dit is redelik eenvoudig.

Hoekom posisie relatief meriete spesiale aandag?

Terwyl die meeste van die eiendomswaardes Posisie, om dit sag te stel, "spoeg" op die omliggende elemente, met behulp van die waarde "styl posisie: relatiewe", moet altyd onthou oor die hele bladsy in sy geheel, want onbehoorlike gebruik kan sterk "skewe" die hele inhoud van die skerm .

Daarbenewens het hierdie eiendom toelaat net jy maklik omskep vaste ontwerp aanpasbaar, want sy aansoek outomaties sal beïnvloed al die inhoud bladsye. Dan het ons nog tyd om die voorbeelde en foute met behulp van hierdie waarde te oorweeg, en jy sal sy tasbare betekenis in die praktyk sien.

Wanneer moet jy relatiewe posisionering gebruik?

In bykomend tot die konvensionele uitleg van bladsye HTML, posisie relatief dikwels gebruik om 'n verskeidenheid van interessante effekte te skep. Byvoorbeeld, as jy 'n item wil "kom" op 'n bladsy of nie, inteendeel, geleidelik verder gaan as sy grondgebied, dit is juis hierdie eiendom kan jou help om hierdie "trick" te implementeer.

Hierdie "truuks" geïmplementeer word deur Javascript is, of, as jy mik vir die progressiewe instelling, deur die eienskappe van CSS3, wat jou toelaat om die sikliese verandering in die waarde van 'n bepaalde veranderlike aan te pas.

Daarbenewens, in sommige gevalle moontlik om te skep "baster" waardes posisie relatief. CSS, maar nie op dieselfde tyd kan jy iets soos posisie gestel: absolute familielid, maar met behulp van 'n paar truuks, dit is steeds moontlik om hierdie effek te bereik. Hierdie benadering kan nuttig in gevalle wees waar jy nodig het om iets kompleks soos skep 'n tooltip of pop-up menu. Met inagneming van die voorbeelde, sal ons 'n beskrywing van die struktuur van so 'n gee "baster."

Voorbeelde van die gebruik van die relatiewe posisie

Posisie relatief - dit is redelik eenvoudig, maar buigsaam hulpmiddel wat jou toelaat om 'n verskeidenheid van interessante effekte te implementeer. Ten einde nie tyd te mors en plaas om nuttelose kode sjabloon skryf, bied ons 'n paar mondelinge algoritmes, wat jou site of spesifieke bladsye kan versier.

Kom ons begin met 'n "loop uit" lyn. Veronderstel jy het 'n behoefte aan 'n element wat sal "reis" omdat die linkerkant van die skerm en stadig dit te skuif na die regterkant. Om so 'n "meganisme" moet stand te implementeer: relatiewe; links: -100px, waar -100 - die geskatte aantal van die pixels waaruit die blok breedte. Hierdie styl sal jou toelaat om die eenheid buite die skerm weg te steek, plaas dit in die "beginposisie". Nou kan jy 'n script wat elke paar millisekondes links eiendomswaarde per eenheid, solank dit nie gelyk aan die wydte van die venster minus die breedte van die element geword verhoog te gebruik. As gevolg hiervan, kry ons 'n eenheid wat verskyn aan die linkerkant van die rand, gerol oor die skerm, en "parke" in sy regterhand.

Nog 'n voorbeeld kan jy "relatiewe-absolute" elemente te skep. Byvoorbeeld, kan jy 'n absolute betree binne 'n ander, met posisie relatief. As gevolg hiervan, het ons 'n "relatiewe" blok wat nie die grootte waarop die absolute geskrywe het nie, is nou in staat om manifesteer in 'n posisie onafhanklik van die vorige element.

Tipiese foute by die gebruik van posisie relatief

Die mees algemene fout by die gebruik van die posisie relatief is dat baie web ontwerpers vergeet van die vermoë om 'n plek te bespreek in die eenheid, wat oral opgespoor kan word. Byvoorbeeld, as jy 'n redelike groot, buite die skerm en 'n relatiewe posisie geplaas, in sy plek sal 'n gapende "gat" te wees. Dit is egter nog hierdie eiendom soms skep sekere ongerief kan gebruik word vir 'n goeie, byvoorbeeld, skep 'n interessante effek van "self-byeenkoms" van die webwerf, waar al sy blokke geleidelik in die top posisie geplaas word: 0; links: 0; t. e. sy oorspronklike plek.