Позиция спрямо - какво е това? подробно описание

Разполагане HTML - продължителен процес, строга, но много креативни. Въпреки факта, че за по-голямата част от хората, които работят в областта на ИТ, уеб страници оформление може да изглежда скучно рутинни, специалисти, които имат призвание за такъв случай, не само качествено извършване на задачата, но и получават от процеса на материално удоволствие.

Въпреки това, преди да се превърне в опитен програмист, всеки новодошъл прекарва много време в изучаване на различните инструкциите и спецификациите на двата езика HTML, и на своя съюзник - CSS. За точно какво CSS, какво е и какво "финт уши" Ви дава възможност да се изправи, както и един от своите най имоти - Позиция Относителна - днес ние ще говорим.

Какво е CSS?

CSS Съкращение може да се транскрибира и преведени на руски като "Cascading Style Sheets". Това звучи доста странно - от една страна, изглежда ясно, и думи, а от друга - общия смисъл не е непосредствено заловен. Нека започнем с прости - със стил. Тази технология позволява да прикачите обекта на страницата, определени характеристики по отношение на външния вид, че можете да се регистрирате само веднъж и да използвате неограничен брой пъти.

Думата "маса" в официалния превод се появява почти случайно - всъщност по-подходящо тук е да се използва думата "списъци" или "списъци", обаче авторите на първоначалния превод, решиха, че CSS прилича на списък с имена, и това, което сме като сега е да ги изпробвате.

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

Така че сега, когато всичко е ясно от името, нека да разгледаме един прост пример. Да кажем, че вашия сайт трябва да бъде голям брой бутони, проектирана по определен начин. Те имат свойства като размер, сянка, непрозрачност, цвят. Разбира се, можете да зададете тези параметри, създаване на всеки бутон, но е много по-лесно да се използва CSS. На практика, трябва да се опише определен клас, в което са посочени стойностите на всички по-горе свойства, а след това, вместо един дълъг списък, на етикета на всеки бутон ще трябва само да укажете името на класа, а след това на самия браузър ще оцвети тези елементи в желания цвят и да им даде правилното "блясък".

Какво прави имота на позиция?

Сега преминете направо към позиция на собственост, в името на която е започнала цялата тази статия. Ако сте запознати с английския език, или имат добра интуиция, а след това вече трябва да е ясно - този имот е отговорен за местоположението на обекта. В действителност, такъв, какъвто е, но вместо да се определи конкретното местоположение, този хотел казва на браузъра как тя трябва да бъде поставен по един или друг елемент по отношение на съседна или през страницата като цяло.

Кои стойности могат собственост Позиция?

Нашата собственост може да приеме няколко различни стойности, има само пет са. Ето кратко описание на всеки:

• Позиция наследи. Тази функция ви позволява да копирате данни от позицията на елемент, който е родител. Например, ако имате Разделение с определена позиция по отношение, а след това влезе в него с IMG стойност наследи също ще бъде зададена на Относителен.
• Статична позиция. Тази стойност се дава на всички елементи, автоматично, ако не е упоменато повече. Елементите се вписват в позиция, както е посочено в кода и да не са достъпни за различни "излишни украшения", което позволява да се промени позицията си.
• Позиция Absolute. Чрез тази стойност имота позицията е доста често се използва в случаите, когато е необходимо да се създаде "плаващ" елемент. С дадена стойност на единицата за имот е "невидим" за останалите компоненти на страницата. Това означава, че те са подредени така, сякаш ни абсолютен елемент не съществува. Самият той винаги ще бъде на мястото си, независимо от това колко далеч са превъртели страница.
• Позиция Фиксирана. В много отношения, тази стойност е подобна на предишната, обаче, докато абсолютната елемент е свързан с родителя, фиксирани използва само координатите на горния ляв ъгъл на екрана на браузъра, без да обръща внимание на останалата част от елементите, които го предшестват.
• И накрая, позиция спрямо. Този тип стойности дава позициониране елемент спрямо друга, които могат да бъдат полезни за създаване на адаптивен маркировка нарича общо "гума". С това свойство, елементът ще "остави", от друга, без да се губи способността да променят позицията си на страницата.

Работа с Позиция в различни браузъри

Не всички браузъри са еднакво съвместими. Докато повечето алтернативни програми за сърфиране в интернет без никакви спънки възприемат стойност на позиция е абсолютно вярно ", хронично специален» Internet Explorer счита имота, в зависимост от неговата версия.

Например, с помощта на вече "погребан" на браузъра Internet Explorer 6, не можете да използвате фиксирана стойност и да наследи - "магарето", те просто го игнорирате. Все пак, въпреки факта, че на седмия вариант на ситуацията започна да се подобрява, и фиксирана вече обработена, за да наследя любим "браузър за изтегляне на други браузъри", постигната едва през осмата си въплъщение.

Останалата част от наблюдателите спокойно се справят позиция с първата версия, с изключение на Opera, която има подкрепата на имотите в 4-те си вариации, публикувани в средата на 90-те години.

Работа с Позиция в Javascript

Всъщност, историята на това как да се работи с имота Позиция в Javascript е, сме включили само в името на добрите нрави. Тъй като този имот не са изпитали някакви специални знаци в заглавието, можете да използвате JS без никакви промени, например, за да зададете Разделение позиция по отношение, трябва да включва следния ред: div.style.position = 'роднина ".

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

Защо позиция спрямо заслужава специално внимание?

Докато повечето от стойността на имотите позиция на, меко казано, "изплю" на околните елементи, като се използва стойността "позиция стил: роднина", винаги трябва да си спомняме за цялата страница като цяло, тъй като неправилната употреба може силно "кос" на цялото съдържание на екрана ,

В допълнение, този имот само ви позволява лесно да конвертирате фиксирана дизайн адаптивна, защото прилагането му ще се отрази автоматично всички страници със съдържание. След това ние все още имаме време да се помисли за примерите и грешки с помощта на тази стойност, и ще видите неговото материално значение в практиката.

Кога трябва да се използва относително позициониране?

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

Тези "трикове" се осъществяват чрез Javascript е, или, ако се стреми към постепенното налагане чрез свойствата на CSS3, които ви позволяват да се регулира цикличния промяната в стойността на даден променлива.

Освен това, в някои случаи е възможно да се създаде "хибридни" ценности Позиция Относителна. CSS, макар и не в същото време ви позволява да настроите нещо подобно положение: абсолютен роднина, но с помощта на някои трикове, че все още е възможно да се постигне този ефект. Този подход може да бъде полезна в случаите, когато е необходимо да се създаде нещо като сложен подсказка или изскачащо меню. Като се има предвид примерите, ние ще се даде описание на структурата на такъв "хибрид".

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

Позиция по отношение - това е доста проста, но гъвкав инструмент, който ви позволява да изпълнява най-различни интересни ефекти. За да не се губи време и място да се напише код безполезен шаблон, ние представяме няколко орални алгоритми, които могат да украсяват вашия сайт или определени страници.

Да започнем с "изчерпване" линия. Да предположим, че имате нужда от един елемент, който ще "пътуване", защото в левия край на екрана и бавно го преместете от дясната страна. За изпълнение на такава "механизъм" трябва да определи позицията: относителна; левия: -100px, където -100 - приблизителния брой на пикселите, съставляващи ширината на блок. Този стил ще ви позволи да скрие елемента извън екрана, да го поставите в "изходна позиция". Сега можете да използвате скрипт, който ще се увеличи на всеки няколко милисекунди оставени стойността на имота за единица, стига да не става равна на ширината на прозореца на браузъра минус широчината на елемента. Резултатът е единица, която излиза от левия ръб, навити по екрана и "паркирани" в дясната си ръка.

Друг пример ви позволява да създадете "роднина-абсолютни" елементи. Например, можете да въведете абсолютен в друг, като позиция спрямо. В резултат на това ние имаме "роднина" блок, който не разполага с размерите, на които е изписано абсолютното, сега е в състояние да се прояви в състояние независимо от предишния елемент.

Типични грешки при използване на позиция по отношение

Най-често срещаната грешка, когато се използва относителната позиция е, че много уеб дизайнери забравят за възможността да запазите място в устройството, което може да се намира навсякъде. Например, ако имате доста голям, поставен извън екрана и с относително позициониране, на нейно място ще бъде зейналата "дупка". Въпреки това, дори и този имот е понякога създава известни неудобства, може да се използва за добро, например, създава интересен ефект на "самостоятелно сглобяване" на обекта, където всички свои блокове постепенно се поставя в най-горната позиция: 0; лява: 0; т. е. първоначалното си местоположение.