Позиција во однос - што е тоа? детален опис

Вгнездување HTML - долготраен процес, ригорозни, но многу креативни. И покрај фактот дека за поголемиот дел од луѓето вработени во ИТ, веб страници распоред може да се чини здодевен рутински, специјалисти, кои имаат вокација за таков случај, не само квалитативно извршување на задачата, но исто така добиваат од процесот на материјални задоволство.

Сепак, пред да стане искусен coder, секој новодојденец троши многу време во проучување на различните упатства и спецификации и на јазикот HTML, како и на нејзиниот сојузник - CSS. За точно она што CSS, она што е и она што "финт уши" ви овозможува да се нагоре, како и еден од нејзините главни карактеристики - Позиција во однос - денес ние ќе разговараме.

Што е CSS?

CSS Кратенка може да се транскрибираат и преведени на руски како "каскадни стилски листови". Звучи прилично чудно - од една страна, се чини јасно, и зборови, а од друга - општо значење не е веднаш заробени. Да почнеме со едноставен - со стил. Оваа технологија ви овозможува да се закачите на објекти на страницата, одредени карактеристики во однос на појавата што ќе може да се регистрираат само еднаш и да користи неограничен број на пати.

Зборот "маса" на официјалниот превод се појави речиси случајно - всушност посоодветно тука ќе биде да го користат зборот "списоци" или "листи", но авторите на оригиналниот превод одлучи дека CSS изгледа како повеќе од список, и кои сме ние како е сега да ги пробате.

Конечно, зборот "Каскада". Факт е дека секој елемент може да има неколку стилови кои може да се меша, па дури и да се преклопуваат. Во такви случаи, прелистувачот мора да почива на еден сет на правила, со цел да се компонира на изгледот на блок, кој испадна да биде неколку стилови, со еден од нив, на пример, има позиција во однос на имот, а од друга - Позиција Апсолутот. Всушност, ваквите конфликти не може да се толерира, но во големи проекти како конфузија се случува доста често.

Па сега, кога се е јасно од името, ајде да погледнеме еден едноставен пример. Да речеме дека вашиот сајт треба да се голем број на копчиња, дизајниран во одреден начин. Тие имаат својства како што се големината, сенка, транспарентноста, боја. Се разбира, можете да наведете овие параметри, создавање на секое копче, но е многу полесно да се користи CSS. Во пракса, треба да се опише одредена класа, во кое се дадени вредностите на сите од горенаведените карактеристики, а потоа, наместо на еден долг список, ознака на секое копче само ќе треба да го зададете името на класата, а потоа самиот прелистувач ќе го обои овие елементи во саканата боја и да им даде соодветна "сјај".

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

Ние сега се продолжи директно Позиција имотот, за доброто на која започна целата оваа статија. Ако сте запознаени со англискиот јазик, или имаат добра интуиција, тогаш веќе треба да биде јасно - овој имот е одговорен за локацијата на објектот. Всушност, како што е, но наместо тоа, се утврди на одредена локација, овој имот кажува на прелистувачот како тоа треба да биде поставена на еден или друг елемент во однос на соседните или преку страницата како целина.

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

Нашиот имот може да го прифати неколку различни вредности, има само пет се. Еве краток опис на секој:

• Позиција наследат. Оваа функција ви овозможува да го копирате податоци за положбата на елементот кој е родител. На пример, ако имате div со одредена позиција во однос, а потоа влезе во него со IMG вредност наследува, исто така, ќе биде поставена на Релативна.
• Статични позиција. Оваа вредност се дава на сите елементи автоматски, доколку не е повеќе. Елементите се вклопуваат во позиција како што е споменато во кодот и не се достапни за избор на "евтини", дозволувајќи им да го промени својот став.
• Позиција Апсолутот. Со овој вредноста на имотот на позиција е доста често се користи во случаи кога тоа е потребно да се создаде "лебдечки" елемент. Со оглед на вредноста на предметот на имотот е "невидлив" за другите компоненти на страната. Тоа е, тие се наредени како нашата апсолутна елемент не постои. Самиот тој секогаш ќе биде во место, без оглед на тоа колку се прелистуваат страница.
• Позиција Фиксна. На многу начини, оваа вредност е слична на претходната, сепак, додека апсолутниот елемент е поврзан со родител, фиксна користи само координатите на горниот лев агол на екранот на Пребарувач, игнорирајќи ги останатите елементи кои му претходи.
• Конечно, позиција во однос. Овој тип вредности овозможува позиционирање елемент во однос на другите, што може да биде корисно за создавање на адаптивни означувањето наречен заедничко "гума". Со овој имот, ставката ќе "push" од друга страна, без губење на способноста да се промени својата позиција на оваа страница.

Работа со Позиција во различни прелистувачи

Не сите прелистувачи се подеднакво компатибилна. Додека повеќето алтернативни програми за интернет сурфање без hitches согледува вредноста на функцијата е апсолутно точно ", хронично специјални» Internet Explorer смета на имотот, во зависност од верзијата.

На пример, со користење на веќе "погребан" прелистувачот IE6, не можете да користите фиксна вредност и ќе наследи - "магаре" тие едноставно го игнорираат. Сепак, и покрај фактот дека на седмата верзија на ситуацијата почна да се подобри, и фиксни веќе обработени, да наследиме сакана "прелистувач за да ја преземете други пребарувачи," достигна само во осмата инкарнација.

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

Работа со Позиција во вклучите Javascript-

Всушност, приказната за тоа како да се работи со имотот Позиција во вклучите Javascript-е, ние се вклучени само за доброто на пристојност. Бидејќи овој имот не се имате било какви специјални карактери во насловот, можете да го користите ЈС без никакви промени, на пример, за да го поставите div Позиција во однос, треба да се вклучат во линија вака: div.style.position = "роднина".

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

Зошто Позиција во однос заслуги посебно внимание?

Додека поголемиот дел од вредноста на имотот позиција, да го стави благо ", расправијата" на околните елементи, ја користи вредноста "позиција стил: роднина", секогаш треба да се запамети околу целата страница како целина, бидејќи неправилната употреба може силно "искривување" на целата содржина на екранот .

Покрај тоа, овој имот само што ви овозможува лесно да конвертирате фиксен дизајн прилагодливи, бидејќи неговата примена ќе влијае автоматски сите страници содржина. Тогаш ние се уште имаат време да се разгледа на примери и грешки со користење на оваа вредност, и ќе видите нејзините материјални значење во пракса.

Кога треба да го користите роднина позиционирање?

Во прилог на конвенционалните изгледот на страниците HTML, позиција во однос често се користи за да се создаде различни интересни ефекти. На пример, ако сакате ставка "дојде" на страница или, напротив, постепено се отиде подалеку од својата територија, тоа е токму овој имот може да ви помогне да се спроведе овој "трик".

Овие "трикови" се спроведува преку вклучите Javascript-е, или, ако имаат за цел за прогресивно воведување, преку својства на CSS3, која ќе ви овозможи да се прилагоди на циклични промени во вредноста на одредена променлива.

Покрај тоа, во некои случаи, можно е да се создаде "хибрид" вредности Позиција Релативна. CSS, но не и во исто време ви овозможува да поставите нешто како позиција: апсолутна роднина, но со помош на некои трикови, се уште е можно да се постигне овој ефект. Овој пристап може да биде корисна во случаи каде што треба да се создаде нешто како комплекс како совет или pop-up менито. Со оглед на примери, ќе се даде опис на структурата на една ваква "хибрид".

Примери за користење на релативната рангирање

Позиција во однос - тоа е прилично едноставна, но флексибилна алатка која ви овозможува да се спроведе на различни интересни ефекти. Со цел да не се губи време и место да се напише бескорисни кодот дефиниција, ви го претставуваме неколку орален алгоритми, кои може да ги красат вашиот сајт или специфични страници.

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

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

Типични грешки кога се користи Позиција во однос

Најчестите грешки при користење на релативната позиција е дека многу веб дизајнери заборавајте за можноста да се резервира место во единицата, во која може да се наоѓа насекаде. На пример, ако имате прилично голема, сместени надвор од екранот и има релативна позиционирање, на негово место ќе биде широко "дупка". Сепак, дури и овој имот е понекогаш создава некои непријатности може да се користи за добро, на пример, создавајќи интересен ефект на "само-монтажа" на лице место, каде сите негови блокови постепено се сместени во врвот позиција: 0; лево: 0; т. е. на нејзината оригинална локација.