CSS: Разликата между свойствата на позицията

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

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

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

  • Статичен: По подразбиране позиция за всеки елемент. Няма определена позиция и елементът ще се влива в страницата, както обикновено. Не е необходимо да указвате тази стойност на позицията, освен ако не се опитвате да замените предварително зададена позиция. Например, ако вашият уебсайт е изграден върху рамка с предварително зададени позиции по подразбиране.
  • Относително: Сравнително разположените елементи могат да имат позиция, стига да са зададени допълнителните свойства: отгоре, отдолу, отляво и отдясно. Допълнителното свойство ще коригира елемента далеч от нормалното му положение. Когато използвате тази позиция, не се създават празни интервали. С тази позиция можете също да използвате свойството z-index. По подразбиране (стойност: auto), елементът ще се появи отгоре на всеки друг статично разположен елемент.

* Забележка: Можете да използвате свойството z-index само на позиционирани елементи. Този имот няма да работи върху статично разположени елементи. Z-индексът контролира реда на стека на вашите елементи. Можете да регулирате стойността на z-индекс, за да контролирате външния вид на стека от елементи. По-висок z-индекс би поставил елемента пред друг елемент с по-нисък ред на стека и обратно.

  • Поправено: Абсолютно позиционираният елемент е позициониран спрямо прозореца на изглед / прозорец на браузъра и той остава в същото положение, дори когато страницата се превърта. Ако използвате тази позиция и имате флекс като ваш дисплей, абсолютното позициониране все още ще работи върху гъвкави контейнери. Въпреки това, абсолютно позициониране конфликт с гъвкави деца (на гъвкав контейнер).
  • Абсолют: Абсолютно позиционираният елемент е позициониран спрямо най-близкия позициониран прародител (родителския / контейнерния елемент). Ако няма елемент на предците, тогава елементът се позиционира спрямо тялото на документа. За разлика от фиксираното положение, при абсолютно, елементът се движи със страницата, когато превъртате. При абсолютно позициониране елементът се отстранява от потока на други елементи в документа. Това означава, че абсолютно позициониран елемент няма да повлияе на други елементи на вашата страница и обратно.
  • Поплавък: Обвива текст около изображения и се използва за по-лявата или дясната страна на страницата.
  • Изчистване: Премества плаващите елементи наляво или надясно или и двете, за да натиснете съдържанието и съдържанието да се появи след плаващия елемент. Можете също да преместите плаващия елемент inline-start или inline-end.

Вижте визуално разликата между свойствата на позицията и това е по-подробна документация за CSS позициониране.