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

Спецификата на изграждане на поток от документ

Позиция CSS работи с потока на уеб страница. Как да го разберем? По подразбиране всички елементи на страницата са подредени в реда, в който сте ги създали в html маркирането. Ако заглавката на маркера се намира над етикета на долния колонтитул, страницата ще се покаже по-горе. Обратно, ако по някакъв начин решите да поставите долния колонтитул в html върху "host", "сутеренът" на страницата ще се покаже над "шапката". В този случай блоковите елементи заемат цялата достъпна за тях ширина. Линейните, от своя страна, са подредени в един ред, докато вземат всичко, и след това започват да се прехвърлят към нова. Тази поръчка се нарича поток от документ. "


За да промените поведението на потока, използвайте свойството Position в CSS. Той може също да се промени поради свойствата на флоат, но ние няма да го разгледаме. С помощта на позиционирането е възможно да принудим елемента "да изпадне" от обикновения поток, след което ще започне да се държи по нов начин. Как точно - зависи от стойността на използвания имот.

CSS Position: static

Позиция: статично или статично позициониране, е стойността по подразбиране за всички html блокове, които сте създали. При нормални обстоятелства не е необходимо да се справяте с него. Ако за всеки блок или линия изобщо не е посочена позиция, то тя има стойност static. На страницата този компонент се показва в съответствие с потока. Ако зададете свойствата отдясно /наляво или отгоре /отдолу, няма да има ефект.

Позиция на CSS: фиксирана

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

CSS Position: relative

Използването на това свойство се нарича относително позициониране. Ако зададете свойство позиция: относителна, тазище остане в сила. На пръв поглед нищо специално няма да се случи, но всичко ще се промени, ако използвате свойствата дясно /ляво и отгоре /отдолу допълнително. С тяхна помощ можете да контролирате движението на компонента спрямо неговото местоположение. На мястото, където блокът или линията са били преди, ще има празно пространство - други елементи ще останат в позициите си, без да се обръща внимание на свободното пространство.
При преместване на компоненти не засяга позицията на околните части на страницата. Те ще останат на местата си, въпреки че позиционираният блок може да ги блокира. Само по себе си имотът рядко се използва. Обикновено се използва в комбинация със следната опция.

Абсолютно позициониране

Един от най-интересните и най-използвани варианти. Когато използвате свойството Position с абсолютната стойност на компонента, компонентът на страницата ще се брои срещу прозореца на браузъра. Други елементи (не абсолютно позиционирани) като че ли "забравят" за съществуването на "сестра" с Позиция: абсолютна и заемат своето място в потока. Изглежда, че всичко е точно същото, както в случай на Позиция: фиксирана, но има сериозни разлики. Първо, позицията на елемента може да се контролира свободно - за тази цел използвайте свойствата отгоре /надясно /отдолу /наляво. Например, ако зададете най-ниската стойност на: 100px, блокът ще "отстъпи" от дъното на страницата с 100 пиксела. Второ, когато превъртането е "абсолютен" компонентще остане на място, вместо да се придвижва в страницата.

Взаимодействие на абсолютни блокове с родителски елементи

Възможно е да се постигне още по-прецизен контрол над абсолютно позициониращия компонент. За да направите това, трябва да зададете имуществото на баща му Позиция: фиксирана, относителна или абсолютна. Помислете за пример. Имате div с относително-div класа, вътре в който има div клас с абсолютен div клас. Поставяме вътрешния блок в позиция: абсолютна. Той моментално "излита" от потока и се появява някъде горе, защото сега неговото местоположение се изчислява по отношение на прозореца на браузъра. Сега поставяме блока с класа относително-div Позиция: относителна и "блудният син" се връща на мястото. Почти. Всъщност той се появява в горния ляв ъгъл на родителския елемент.
Защо се случва това? Дело в спецификата на позицията: абсолютна собственост. По подразбиране нейното състояние зависи от браузъра, но ако "родителят" също е разположен някъде извън статичния, позицията започва да зависи от родителския елемент. Това е много удобно, защото можете да поставите компонента навсякъде, без да броите огромни номера в прозореца на браузъра. Рецепцията често се използва за поставяне на икони, бутони и други малки елементи.

Поставете CSS в центъра

Една от основните трудности за начинаещите е да центрират елемента вертикално и хоризонтално. Правилно използвайки свойството Position, е по-лесно да го направите прост. CSS Позиция: абсолютна в центърасе настройва както следва. Например, да предположим, че имате d iv с абсолютния div клас, който е в божествено с относителния клас div. "Бащата" е позициониран по отношение на неговата ширина, равна на ширината на цялата страница. "Потомъкът" има ширина и височина от 400 пиксела, абсолютното позициониране и по подразбиране се намира в горния ляв ъгъл на родителския елемент. Всичко, което трябва да направите, е да зададете абсолютния горен компонент: 50% и ляво: 50%. Почти готово! Absolute-div се премести от мястото и се озова почти в центъра, но изобщо не. Средата на "бащата" е свързана с неговия регион и ние трябва да центрираме центъра "потомък" в центъра на блока. За да направите това, трябва да зададете margin-left и margin-right със стойности от -200 px. По този начин ще преместим абсолютно позициониран блок с половината от неговата височина и ширина. Всичко, което е в центъра!

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

Проблемът може да бъде сложен, на пръв поглед, "наслагване" на позициониращи елементи върху техните "съседи". Например, компонентът с Position: fixed ще припокрие всичко, което се намира на страницата. Можете да коригирате ситуацията, като използвате свойството z-index, но имайте предвид, че тя работи само за позиционирани елементи. Съответно, ако искате да поставите блок върху фиксирано позициониран елемент, този блок също ще трябва да зададе позициониране. Например, относително. Най-добрият начин да усъвършенствате позиционирането е да погледнете примери на Позиция CSS, да експериментирате и да опитате нещо по своему. Опитайте се да научитеизползвайте го във връзка с функцията calc () - това ще ви позволи по-гъвкаво да конфигурирате местоположението. Не забравяйте обаче, че това свойство не е предназначено да изгражда цялата решетка на страницата. Използвайте го, за да преместите относително малки елементи, в противен случай може да бъде много лесно да се объркате.