Pozicionin relativ - çfarë është ajo? përshkrim të detajuar

Fole HTML - një proces i gjatë, rigoroz, por shumë kreative. Pavarësisht nga fakti se për shumicën e njerëzve të punësuar në IT, web faqet faqosje mund të duket rutinë mërzitshëm, specialistë që kanë një profesion për një rast të tillë, jo vetëm cilësisht të kryer detyrën, por edhe të marrë nga procesi i kënaqësisë prekshme.

Megjithatë, para se të bëhet një coder përvojë, secili njeri i panjohur shpenzon shumë kohë duke studiuar udhëzimet e ndryshme dhe specifikat e të dyja gjuhës HTML, dhe mbi aleatin e saj - CSS. Rreth pikërisht çfarë CSS, çfarë është dhe çfarë "veshët shtirje" ju lejon të merrni deri, si dhe një prej pronave të saj të lartë - pozicionit relativ - sot ne do të flasim.

Çfarë është CSS?

CSS Shkurtesa mund të transkriptohen dhe përkthyer në rusisht si "Cascading Style Sheets". Kjo tingëllon mjaft e çuditshme - në njërën anë, duket qartë, dhe fjalët, dhe nga ana tjetër - kuptimi i përgjithshëm nuk është kapur menjëherë. Le të fillojmë me të thjeshtë - me stil. Kjo teknologji ju lejon të bashkëngjitni objektet në faqe, karakteristika të caktuara në lidhje me pamjen që ju vetëm mund të regjistroheni një herë dhe të përdorin një numër të pafund të kohës.

Fjala "tryezë" në përkthim zyrtar u shfaq pothuajse nga aksident - në fakt shumë e përshtatshme këtu do të jetë për të përdorur fjalën "listat" ose "listat", megjithatë autorët e përkthimit origjinal vendosi që CSS duket si më shumë se një listë, dhe kush jemi tillë është tani për të provoni ato.

Së fundi, fjala "Cascade". Fakti është se secili element mund të ketë disa stile që mund të jetë përzier apo edhe përputhen. Në raste të tilla, shfletuesi duhet të mbështetet në një sërë rregullash, në mënyrë që të kompozoj pamjen e bllokut, e cila doli të jetë disa stile, me një prej tyre, për shembull, ka një pozicion pronë relative, dhe të tjera - pozitën absolute. Në fakt, konflikte të tilla nuk mund të tolerohen, por në projekte të mëdha konfuzion i tillë ndodh mjaft shpesh.

Deri tani, kur çdo gjë është e qartë nga emri, le të shohim në një shembull të thjeshtë. Le të thonë se faqja e juaj duhet të jetë një numër i madh i butonat, i projektuar në një mënyrë të caktuar. Ata kanë veti të tilla si madhësia, hije, perde, ngjyra. Sigurisht, ju mund të specifikoni këto parametra, duke krijuar çdo buton, por është shumë më e lehtë për t'u përdorur CSS. Në praktikë, ju duhet për të përshkruar një klasë të caktuar, që listat vlerat e të gjitha pronat e mësipërme, dhe pastaj, në vend të një liste të gjatë, tag e çdo buton vetëm do të duhet të specifikoni emrin e klasës, atëherë shfletuesi vetë do të ngjyrosin këto elemente në ngjyrën e dëshiruar dhe për t'u dhënë atyre një të duhur "gloss".

Çfarë e bën pronësia e Pozicionit?

Ne tani të procedojë drejtpërsëdrejti në Pozita e pronës, për hir të së cilës ka filluar këtë artikull të tërë. Nëse jeni të njohur me gjuhën angleze, ose kanë një intuitë të mirë, atëherë ju tashmë duhet të jetë i qartë - kjo pronë është përgjegjës për vendndodhjen e sendit. Në fakt, ashtu siç është, por në vend të përcaktuar vendndodhjen specifike, kjo pronë i tregon shfletuesit se si ajo duhet të vendoset në një ose një tjetër element në lidhje të ngjitur ose në të gjithë faqen e si një e tërë.

Cilat vlera mund prona Position?

Prona ynë mund të pranojë disa vlera të ndryshme, ka vetëm pesë. Këtu është një përshkrim të shkurtër të secilit:

• Pozita të trashëguar. Ky funksion ju lejon të kopje të të dhënave në pozicionin e elementit që është një prind. Për shembull, në qoftë se ju keni një div me një të afërm të caktuar pozicion, pastaj hyri në të me vlerë trashëgojnë IMG gjithashtu do të vendosen për të Relative.
• Pozitë statike. Kjo vlerë është dhënë për të gjitha elementet automatikisht, nëse nuk shprehet asnjë më shumë. Elementet përshtaten në pozitë siç është përmendur në kodin dhe nuk janë në dispozicion për një shumëllojshmëri të "frills", duke i lejuar për të ndryshuar pozicionin e tyre.
• Pozita Absolute. Me këtë vlerë pronësia e Pozicionit është përdorur mjaft shpesh në rastet kur është e nevojshme për të krijuar një element të "lundrues". Me një vlerë të caktuar të sendit të pronës është e "padukshme" për komponentët e tjerë të faqes. Kjo është, ata janë rregulluar si element jonë absolute nuk ekziston. Ai vetë do të jetë gjithmonë në vend, pavarësisht se sa janë larg përshkohet faqe.
• Pozicion të caktuar. Në shumë mënyra, kjo vlerë është e ngjashme me atë të mëparshme, megjithatë, ndërsa elementi absolute është i detyruar të prindit, fikse përdor vetëm koordinatat e këndin e sipërm të majtë të ekranit shfletuesit, duke injoruar pjesën tjetër të elementeve që i paraprinë atë.
• Së fundi, pozicionin relativ. Kjo vlerat Lloji lejon element pozicionimi në lidhje me të tjera, të cilat mund të jenë të dobishme për krijimin e një adaptive Markimi thirrur në "gome" të përbashkët. Me këtë pronë, pika do të "shtyjë" të tjera, pa humbur aftësinë për të ndryshuar qëndrimin e tyre në faqe.

Duke punuar me Pozita në shfletues të ndryshme

Jo të gjithë shfletuesit janë njësoj të pajtueshme. Ndërsa programet më alternative për surfing internet pa asnjë hitches perceptuara vlerën e pozitës është absolutisht e vërtetë ", kronikë të veçantë» Internet Explorer konsideron pronën, në varësi të versionin e saj.

Për shembull, duke përdorur tashmë të "varrosur" e shfletuesit IE6, ju nuk mund të përdorni vlera të fiksuara dhe të trashëgojë - "gomarin" ata thjesht të injorojë atë. Megjithatë, pavarësisht nga fakti se versioni i shtatë i situatës filloi të përmirësohej, dhe fikse përpunuar tashmë, për të trashëguar dashur "shfletuesin për të shkarkuar shfletues të tjera", ka arritur vetëm në mishërimin e saj të tetë.

Pjesa tjetër e vëzhguesve qetësi trajtojë Pozicioni me versionin e parë, me përjashtim të Operas, e cila ka marrë mbështetjen e pronave në 4 variacionet e saj, të publikuar në mes të viteve '90.

Duke punuar me pozitën në JavaScript

Në fakt, historia se si të punojnë me pronën pozitë në Javascript është, ne kemi përfshirë vetëm për hir të mirësjelljes. Për shkak se kjo pronë nuk ka ndonjë karaktere të veçanta në titull, ju mund të përdorni JS pa ndonjë ndryshim, për shembull, për të vendosur Pozita div Relative, duhet të përfshijë një linjë si kjo: div.style.position = "relative".

Siç mund ta shikoni, kjo është shumë e thjeshtë.

Pse Pozicioni meritat relative vëmendje të veçantë?

Ndërsa shumica e vlerave pronësia e Pozicionit, për ta vënë atë butë, "zënkë" në elementet përreth, duke përdorur vlerën "pozicionin stil: relative", duhet të mbani mend në lidhje me faqen e tërë si një e tërë, sepse përdorimi i pavend mund fort "anuar" të gjithë përmbajtjen e ekranit .

Përveç kësaj, kjo pronë vetëm ju lejon të lehtë konvertohet adaptive dizajn të caktuar, sepse zbatimi i tij automatikisht do të ndikojë në të gjitha faqet e përmbajtjes. Atëherë ne ende kemi kohë për të shqyrtuar shembujt dhe gabimet përdorur këtë vlerë, dhe ju do të shihni domethënien e saj konkret në praktikë.

Kur duhet të përdorni pozicionimin relativ?

Përveç paraqitjen konvencional i faqeve HTML, Pozita relative e përdorur shpesh për të krijuar një shumëllojshmëri të efekteve interesante. Për shembull, në qoftë se ju doni një send "erdhi" në një faqe apo, në të kundërtën, gradualisht shkoi përtej territorit të saj, është pikërisht kjo pronë mund të ju ndihmojë të zbatojë këtë "mashtrim".

Këto "tricks" janë zbatuar përmes Javascript është, ose, në qoftë se ju qëllim për vendosjen progresive, nëpër pronat e CSS3, të cilat ju lejojnë për të rregulluar ndryshimin ciklike në vlerën e një variable të veçantë.

Përveç kësaj, në disa raste të mundshme për të krijuar vlera "hibrid" pozicion relativ. CSS, edhe pse jo në të njëjtën kohë ju lejon të vendosur diçka si pozicion: të afërm absolute, por duke përdorur disa nga truket, ajo është ende e mundur për të arritur këtë efekt. Kjo qasje mund të jetë e dobishme në rastet kur keni nevojë për të krijuar kompleks diçka si një Tooltip apo menu pop-up. Duke marrë parasysh shembujt, ne do të japim një përshkrim të strukturës së një të tillë "hibrid".

Shembuj të përdorimit renditjen relative

Pozicionin relativ - kjo është shumë e thjeshtë, por mjet fleksibël që ju lejon për të zbatuar një shumëllojshmëri të efekteve interesante. Në mënyrë që të mos humbim kohë dhe të vendosin për të shkruar kodin template padobishme, ne paraqesim disa algoritme me gojë, të cilat mund të dekoroj faqen tuaj ose faqet specifike.

Le të fillojmë me "të drejtuar nga" linjë. Supozoni se ju keni nevojë për një element që do të "udhëtimit", sepse buzë e majtë të ekranit dhe ngadalë lëvizin atë në anën e djathtë. Për të zbatuar një "mekanizëm" të tillë duhet vendosur Pozicioni: relative; majtas: -100px, ku -100 - numri i përafërt i piksele përbëjnë gjerësinë bllok. Ky stil do t'ju lejojë të fshehur njësi jashtë ekranit, duke e vendosur atë në "pozicionin e fillimit". Tani ju mund të përdorni një skenar që do të rrisë çdo disa milisekonda mbetur vlerën e pronës për njësi për aq kohë sa ajo nuk do të bëhet e barabartë me gjerësinë e dritares së shfletuesit minus gjerësinë e elementit. Rezultati është një njësi që vjen nga buzë e majtë, mbështjellë nëpër ekran dhe "parkuar" në dorën e djathtë.

Një shembull tjetër ju lejon të krijoni elemente "relative-absolut". Për shembull, ju mund të hyjë në një absolute brenda një tjetër, duke pasur pozicionin relativ. Si rezultat, ne kemi një bllok "relative" që nuk ka madhësinë në të cilën absolute është shkruar, është tani në gjendje për të manifestuar veten në një pozicion të pavarur të elementit të mëparshëm.

gabimet tipike kur duke përdorur pozicionin relativ

Gabimi më i zakonshëm kur duke përdorur pozitën relative është se shumë web designers harroni në lidhje me aftësinë për të rezervoj një vend në njësi, e cila mund të gjendet kudo. Për shembull, në qoftë se ju keni një mjaft të madh, të vendosur jashtë ekranit dhe të kesh një pozicionim relative, në vend të saj do të jetë një gaping "vrimë". Megjithatë, edhe kjo pronë është nganjëherë krijon inconveniences të caktuara mund të përdoret për të mirë, për shembull, duke krijuar një efekt interesant të "vetë-montimin" të faqes, ku të gjitha blloqet e saj janë të vendosur gradualisht në pozitë të lartë: 0; majtas: 0; t. e. vendndodhjen e saj origjinale.