CSS позиционирането е повече от просто X, Y координати
Позиционирането на CSS отдавна е важна част от създаването на оформление на уебсайтове. Дори и с възхода на по-новите техники за оформление на CSS, като Flexbox и CSS Grid, позиционирането все още има важно място в чантата от трикове на всеки уеб дизайнер.
Когато използвате CSS позициониране, първото нещо, което трябва да направите, е да установите свойството CSS за позицията, за да кажете на браузъра, ако искате да използвате абсолютно или относително позициониране за даден елемент. Също така трябва да разберете ясно разликата между тези две свойства за позициониране.
Докато абсолютната и относителната са двете CSS свойства на позицията, които най-често се използват в уеб дизайна, в действителност съществуват четири състояния на собствеността на позицията:
- статичен
- абсолютен
- относителен
- определен
Static е позицията по подразбиране за всеки елемент на уеб страница. Ако не дефинирате позицията на елемент, той ще бъде статичен. Това означава, че ще се покаже на екрана въз основа на това къде е в HTML документа и как ще се покаже в нормалния поток на този документ.
Ако приложите правила за позициониране, като горната или лявата към елемент, който има статична позиция, тези правила ще бъдат игнорирани и елементът ще остане там, където се появява в нормалния поток на документи. В действителност, рядко, ако някога, трябва да зададете елемент на статична позиция в CSS, тъй като това е стойността по подразбиране.
Абсолютно позициониране на CSS
Абсолютната позиция вероятно е най-лесната позиция на CSS да разбере. Започвате с тази собственост на CSS позиция:
позиция: абсолютно;Тази стойност показва на браузъра, че всичко, което ще се позиционира, трябва да бъде премахнато от нормалния поток на документа и вместо това да бъде поставено в точното местоположение на страницата. Това се изчислява въз основа на най-близкия нестатично разположен прародител на този елемент.
Тъй като абсолютно позиционираният елемент се изважда от нормалния поток на документа, той няма да повлияе върху това, как елементите, които са били преди или след него в HTML, са разположени на уеб страницата.
Като пример - ако сте имали дивизия, която е била позиционирана, използвайки стойност на относителната (ще разгледаме тази стойност скоро) и в рамките на това разделение имахте параграф, който искате да позиционирате 50 пиксела от горната част на разделението, вие ще добави стойност на позиция "абсолютно" към този параграф, заедно с офсетна стойност от 50 пиксела на "горната" собственост, като тази.
позиция: абсолютно; горе: 50px;Този абсолютно позициониран елемент винаги ще показва 50 пиксела от горната част на това сравнително позиционирано отделение - независимо от това, какво друго изобразява там в нормален поток. Вашият "абсолютно" позициониран елемент използва сравнително позиционирания като своя контекст и позитивната стойност, която използвате, е относителна.
Четирите позициониращи свойства, които имате на разположение, са:
- връх
- прав
- дъно
- наляво
Можете да използвате горната или долната част (тъй като елементът не може да бъде позициониран според двете стойности) и наляво или надясно.
Ако даден елемент е настроен на абсолютна позиция, но там няма нестатично разположени предшественици, той ще бъде позициониран по отношение на елемента на тялото, който е най-високото ниво на страницата.
Относително позициониране
Вече споменахме относителното позициониране, така че нека сега да разгледаме този имот.
Относителното позициониране използва същите четири позициониращи свойства като абсолютното позициониране, но вместо да базира позицията на елемента върху най-близкия нестатично разположен прародител, той започва от мястото, където елементът ще бъде, ако все още е в нормалния поток.
Ако например имате три параграфа на уеб страницата си, а третата има поставен "позиция: относителен" стил, позицията й ще бъде изместена въз основа на текущото й местонахождение.
Параграф 1
Параграф 2.
В горния пример третата алинея ще бъде разположена 2м от лявата страна на елемента на контейнера, но все пак ще бъде под първите два параграфа. Тя ще остане в нормалния поток на документа и просто ще бъде леко компенсирана. Ако го промените на позиция: абсолютно; всичко, което следва, ще се появи върху него, защото вече няма да бъде в нормалния поток на документа.
Елементите на уеб страница често се използват за задаване на стойност на позицията: относителна без установена стойност на отместване, което означава, че елементът остава точно там, където би се появил в нормалния поток. Това се прави само, за да се установи този елемент като контекст, срещу който други елементи могат да бъдат абсолютно позиционирани. Например, ако имате разделяне около целия си уебсайт с класова стойност на "контейнер" (което е много често срещан сценарий в уеб дизайна), това разделение може да бъде настроено на позиция относителна, така че всичко в него да може да използва като контекст на позициониране.
Какво е фиксирано позициониране?
Фиксираното позициониране много прилича на абсолютно позициониране. Позицията на елемента се изчислява по същия начин като абсолютния модел, но фиксираните елементи след това се фиксират на това място - почти като воден знак . Всичко останало на страницата ще премине през този елемент.
За да използвате тази стойност на собственост, ще зададете:
позиция: фиксирана;Имайте предвид, че когато коригирате елемент в сайта си, той ще се отпечата на това място, когато вашата уеб страница бъде отпечатана. Ако например елементът ви е фиксиран в горната част на страницата ви, той ще се покаже в горната част на всяка отпечатана страница - защото е фиксирана в горната част на страницата. Можете да използвате видове носители, за да промените начина, по който отпечатаните страници показват фиксирани елементи:
@media screen {h1 # first {позиция: фиксирана; }} @media print {h1 # first {position: static; }}Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 1/7/16.