Положају у односу - шта је то? детаљан опис

Угнежђења ХТМЛ-- дуготрајан процес, ригорозна, али веома креативан. Упркос чињеници да је за већину запослених у ИТ, веб странице распоред може изгледати досадну рутину, стручњаци који имају склоност за такав случај, не само квалитативно изврши задатак, али такође добити из процеса опипљиве задовољства.

Међутим, пре него што постанете искусан кодер, сваки новајлија проводи много времена проучавајући различите инструкције и спецификације и на ХТМЛ језику, као и на свог савезника - ЦСС. О тачно шта ЦСС, шта је то и шта "финта уши" омогућава да устанете, као један од својих највећих особина - положај у односу - данас ћемо разговарати.

Шта је ЦСС?

ЦСС држава може транскрибује и преведен на руски као "Цасцадинг Стиле Схеетс". То звучи прилично чудно - с једне стране, чини се јасно, и речи, а са друге - општи смисао није одмах ухваћен. Почнимо са једноставном - са стилом. Ова технологија омогућава да приложите објеката на страници, одређене карактеристике у вези са изгледом да се само може регистровати једном и користити неограничен број пута.

Реч "сто" у званични превод појавио готово случајно - у ствари више одговара овде би било да користите реч "листе" или "листе", међутим аутори првобитног превода одлучио да ЦСС личи више од листе, а ко смо ми таква је сада да их испробате.

На крају, реч "Каскад". Чињеница је да сваки елемент може имати неколико стилова који се могу мешати или чак преклапају. У таквим случајевима, бровсер мора да прибегне скуп правила, како би се компонује изглед блока, који се испоставило да је неколико стилова, са једним од њих, на пример, има положај у односу имовину, а други - Поситион Апсолут. У ствари, такви сукоби не може толерисати, али у великим пројектима као што забуна дешава прилично често.

Тако да сада, када је све јасно из имена, хајде да погледамо једноставан пример. Рецимо ваш сајт треба да буде велики број тастера, дизајниран на одређени начин. Они имају особине као што су величина, сенке, транспарентност, боју. Наравно, можете одредити ове параметре, стварајући свако дугме, али је много лакши за коришћење ЦСС. У пракси, потребно је да опише одређени разред, који даје вредности свих наведених особина, а онда, уместо дуге листе, ознака сваког дугмета ће само треба навести име класе, онда сам претраживач ће обојити ове елементе у жељену боју и дати им одговарајућа "сјај".

Шта значи Позиција имовина?

Ми смо сада наставити директно на имовину положаја, због чега је почео читав овај чланак. Ако сте упознати са енглеског језика, или имају добру интуицију, онда би требало да буде јасно - ово својство је одговоран за локације ставке. У ствари, тако да је, већ одређују конкретну локацију, овај хотел говори бровсер како треба да се постави један или други елемент у односу на суседни или преко странице у целини.

Које вредности може да Позиција имовина?

Наша имовина може да прихвати неколико различитих вредности, постоје само пет. Овде је кратак опис сваке:

• Позиција наследити. Ова функција вам омогућава да копирате податке о положају елемента који је родитељ. На пример, ако имате див са одређеном положају у односу, а затим ушла у њега са ИМГ наследити вредност такође ће бити постављен на релативна.
• Поставите Статиц. Ова вредност се аутоматски даје све елементе, уколико није назначено више. Елементи се уклапају у положају као што је поменуто у коду и нису доступни за разне "сувишних детаља", дозвољавајући да промени свој став.
• Поситион Апсолутна. До ове вредности положаја имовина се често користи у случајевима када је потребно да се створи "плутајући" елемент. Са датом вредност ставке имовине је "невидљиви" за остале компоненте странице. То јест, они су распоређени као да не постоји наша апсолутна елемента. Он сам ће увек бити на свом месту, без обзира на то колико је сцроллед страну.
• Позиција Фиксни. На много начина, ова вредност је сличан претходном, међутим, док апсолутна елемент везана за родитељ, фиксни користи само координате горњег левог угла екрана претраживача, игноришући остале елементе који су му претходили.
• На крају, положај у односу. Овај тип вредности омогућава позиционирање елемента у односу на друге, што може бити корисно за стварање прилагодљиво ознака назива заједничког "гуме". Уз ову некретнину, ставка ће "гурати" с друге стране, без губитка способности да промени своју позицију на страници.

Рад са положаја у различитим бровсерима

Нису сви претраживачи су једнако компатибилни. Док већина алтернативни програми за сурфовање Интернетом без икаквих трзавица уочених вредности положаја је апсолутно тачно, "хронично посебан» Интернет Екплорера сматра имовину, у зависности од верзије.

На пример, користећи већ "сахрањен" бровсер ИЕ6, можете да користите вредност фиксне и наследити - "магарац" они једноставно игнорисати. Међутим, упркос чињеници да је седма верзија ситуација је почела да се побољша, и фиксне већ обрађена, да наследи вољену "претраживач да преузмете друге бровсере," постигнут само у свом осмом инкарнације.

Остатак посматрача мирно положај ручице са првом верзијом, са изузетком опере, која је добила подршку имовине у своја 4 варијације, објављен средином 90-их година.

Рад са положаја у Јавасцрипт

У ствари, прича о томе како да раде са ставом имовине у Јавасцрипт, укључили смо само због пристојности. Јер ово својство нема посебних знакова у наслову, можете користити ЈС без икаквих промена, на пример, да подесите див положају у односу, треба да садржи линију овако: див.стиле.поситион = "релативно".

Као што можете видети, то је прилично једноставно.

Зашто положају у односу заслужује посебну пажњу?

Док је већина имовинских вредности положаја, најблаже речено, "пљувала" на елемената у окружењу, користећи вредности "позицију стиле: релативна", увек треба запамтити у вези целе странице у целини, јер неправилне употребе снажно може "наоко" целокупан садржај екрана .

Осим тога, ово својство само вам омогућава да лако претворити фиксну дизајн прилагодљиво, јер ће његова примена аутоматски утиче на све странице садржаја. Онда још имамо времена да размотре примере и грешке користећи ову вредност, и видећете свој опипљив значај у пракси.

Када би требало да користите релативну позицију?

Поред конвенционалног распоредом страница ХТМЛ, положаја у односу често се користи за креирање низ занимљивих ефеката. На пример, ако желите ставку "дошао" на страници или, напротив, постепено превазилази њене територије, то је управо ова имовина може помоћи да спроведе овај "трик".

Ови "трикови" се реализује кроз Јавасцрипт је, или, ако је циљ за прогресивно наметања, кроз својстава ЦСС3, које вам омогућавају да подесите цикличне промене у вредности одређеног променљиве.

Поред тога, у неким случајевима могуће да се створи "хибридни" вредности положају у односу. ЦСС мада не у исто време омогућава да подесите тако нешто поситион: абсолуте односу, али користећи неке трикове, и даље је могуће да се постигне овај ефекат. Овакав приступ може бити користан у случајевима када је потребно да се створи нешто сложено као алатсавету или поп-уп менија. Имајући примере, даћемо опис структуре таквог "хибрид".

Примери коришћења релативне ранг

Положају у односу - врло је једноставно, али флексибилан алат који вам омогућава да спроведе низ занимљивих ефеката. Како се не би губили време и место за писање бескорисни код шаблон, представљамо неколико усмене алгоритама, који можете украсити ваш сајт или одређене странице.

Почнимо са "понестане" линије. Претпоставимо да имате потребу за елемент који ће "путовање", јер леве ивице екрана и полако крећу на десну страну. Да би таква "механизам" треба да постави позиција: релативна; лево: -100пк, где -100 - приближан број пиксела који чине ширину блока. Овај стил ће вам омогућити да сакријете јединицу ван екрана, што га сврстава у "стартну позицију". Сада можете користити скрипту која ће повећати сваких неколико милисекунди лево вредност имовине по јединици све док не постане једнака ширини прозора прегледача минус ширине елемента. Резултат је јединица која долази из леве ивице, ваљани преко екрана и "паркирао" у десној руци.

Други пример вам омогућава да креирате "релативни апсолутне" елементе. На пример, можете унети апсолутну унутар другог, имају положај у односу. Као резултат тога, имамо "релативно" блок који нема величину у коме је апсолутни је уписан, сада може да се манифестује у положају независно од претходног елемента.

Типични грешке при коришћењу положају у односу

Најчешћа грешка када се користи положај у односу је да многи веб дизајнери заборавити могућност да резервишу место у јединици, која може да се налази било где. На пример, ако имате прилично велики, постављен испред екрана и има релативну позицију, на њеном месту ће бити зјапи "рупа". Међутим, чак и ова имовина се понекад ствара одређене непријатности може да се користи за добро, на пример, стварање занимљив ефекат "самоорганизовање" на сајту, где све његове блокова постепено ставља у горњем положају: 0; лево: 0; Т. Е. првобитни локација.