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