5 характеристики на позиционирането в CSS

В наши дни уеб разработчиците могат да създават сложни оформления на уеб страници, използвайки различни техники на CSS. Някои от тези техники имат дълга история (floats), други (flexbox) са придобили популярност през последните години.

В тази статия ще разгледаме отблизо някои малко известни неща за позиционирането на CSS.

Преди да започнем, нека обобщим накратко основите на различните видове позициониране.

Преглед на наличните методи за позициониране

Свойството CSS position определя типа позициониране на елемент.

Опции за позициониране

static е стойността на свойството за позициониране по подразбиране. Съобщаваме, че този елемент не използва позициониране - позиционирането се прилага само ако зададете тип позициониране, различен от подразбиращия се.

За да направите това, задайте свойството position на една от следните стойности:

И само след задаване на позиционирането можете да използвате свойствата, които компенсират елемента:

  • връх
  • нали
  • отдолу
  • наляво
  • Първоначалната стойност на тези свойства е ключовата дума auto .

Трябва да се има предвид, че ако даден елемент има свойството position, зададено на абсолютно или фиксирано, то той е абсолютно позициониран елемент. Също така, за позиционираните елементи, свойството z-index започва да работи, което определя реда на подреждане.

Разлики между основните методи за позициониране

Сега нека да разгледаме бързо три основни разлики между наличните видове позициониране:

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

Това може да се види по-подробно в демото:

Забележка: Позиционирането на "лепилни елементи" все още е експериментална технология с ограничена поддръжка на браузъра. Разбира се, ако искате, можете да използвате polyfill, за да добавите тази функционалност към браузъра, но предвид ниското му разпространение, това свойство няма да бъде обсъждано в статията.

Позициониращи елементи с абсолютен тип позициониране

Сигурен съм, че повечето хора знаят как работи абсолютното позициониране. Новите начинаещи обаче могат да бъдат объркани от много неща.

Затова реших да започна с него, когато описвах малко известни характеристики на позиционирането.

И така, абсолютно позиционираният елемент се измества от най-близко позиционирания му предшественик. Разбира се, това работи, ако някой от предците има позиция, различна от статична - ако елементът няма позиционирани предци, той се измества от прозореца.