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

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

Въпреки това, преди да стане опитен уеб дизайнер, всеки начинаещ прекарва много време, като изучава различни инструкции и спецификации както за езика HTML, така и за своя съюзник CSS. Става дума за това, какво е CSS, за това, което е необходимо и което "feints with uars" ви позволява да ставате, а също и за една от популярните му имоти - Position Relative - днес ще говорим.

Какво представлява CSS?

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

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

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

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

Защо се нуждая от свойството "Позиция"?

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

Какви стойности може да вземе собствеността на позицията?

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

• Позиция Наследяване. Тази характеристика ви позволява да копирате данните за позицията на елемента, който е родител. Например, ако имате div с определената Position Relative, вписаният IMG с наследена стойност също ще получи стойността Relative.
• Позиция Статично. Тази стойност се дава автоматично на всички елементи, освен ако не е посочено друго. Елементите се вписват в позицията, както са посочени в кода и не са достъпни за различни "деликатеси", които им позволяват да променят позицията си.
• Позиция Абсолютно. Тази стойност на собствеността "Позиция" често се използва в случаите, когато е необходимо да се създаде "плаващ" елемент. С тази стойност на собственост елементът остава "невидим" за останалата част от страницата. Тоест те се намират така, сякаш абсолютният ни елемент изобщо не съществува. Самият той винаги ще остане на мястото си, без значение колко далеч е била превъртана страницата.
• Позицията е фиксирана. В много отношения тази стойност е подобна на предишната, въпреки че абсолютният елемент е прикрепен към родителя, фиксираният използва само координатите в горния ляв ъгъл на екрана на браузъра, като не обръща внимание на други елементи, които го предхождат.
• Накрая, относителна позиция. Този тип стойност ви позволява да позиционирате елемента спрямо останалите, което може да бъде полезно при създаването на адаптивна маркировка, наречена "гума" в обикновените хора. С този имот елементът ще "се раздели" на останалите, без да загуби възможността да променя местоположението си на страницата.

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

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

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

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

Работа с позиция в jаvascript

Всъщност, историята за това как да работим със собствеността на позицията в jаvascript, ние включихме само заради благоприличието. Тъй като тази характеристика няма специални символи в името, можете да използвате JS без промени, например, за да зададете позицията Relative div, трябва да включите този ред: div.style.position = lsquo-relativersquo-.

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

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

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

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

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

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

Подобни "трикове" се изпълняват чрез jаvascript или, ако се стремите към прогресивно оформление, чрез свойствата на CSS3, които ви позволяват да конфигурирате циклична промяна в стойността на променлива.

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

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

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

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

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

Често срещани грешки при използване на относителна позиция

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