CSS Position – пълно ръководство за позициониране

CSS позиционирането е една от най-важните концепции в уеб дизайна. С него контролираме къде се намират елементите на страницата – бутони, менюта, изображения и текстове.

🎬 Видео урок:CSS Position – пълно ръководство за позициониране

Какво е CSS position?

Свойството position в CSS определя как даден HTML елемент се подрежда спрямо останалите елементи и спрямо екрана. То контролира дали елементът участва в нормалния поток на страницата или се позиционира независимо.

Видове CSS позициониране

В CSS има пет основни типа позициониране:

• static
• relative
• absolute
• fixed
• sticky

1. position: static

Това е стандартното поведение на всички елементи. Те се подреждат един под друг според HTML структурата. При static не могат да се използват top, left, right и bottom.

2. position: relative

Relative позиционирането позволява да преместим елемент спрямо собствената му позиция, без да нарушим разположението на другите елементи.

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

Мястото на елемента остава заето, дори да го преместим.

3. position: absolute

Absolute премахва елемента от нормалния поток. Той се позиционира спрямо най-близкия родител с position: relative.

.parent {
  position: relative;
}
.child {
  position: absolute;
  bottom: 0;
  right: 0;
}

4. position: fixed

Fixed позиционира елемента спрямо екрана. Той остава на същото място, дори когато скролваме страницата.

.menu {
  position: fixed;
  top: 0;
  left: 0;
}

5. position: sticky

Sticky е комбинация от relative и fixed. Елементът се държи нормално, докато стигне зададената позиция, след което се „залепя“.

.header {
  position: sticky;
  top: 0;
}

Основни свойства при позициониране

• top – отстояние отгоре
• left – отстояние отляво
• right – отстояние отдясно
• bottom – отстояние отдолу
• z-index – контролира кой елемент е най-отгоре

Пример със z-index

.box1 { z-index: 1; }
.box2 { z-index: 10; }

Елементът с по-голям z-index ще се вижда отгоре.

Заключение

Разбирането на CSS позиционирането е ключово за създаването на модерни и responsive сайтове. С правилната комбинация от relative, absolute, fixed и sticky можете да изграждате професионални layouts, менюта и интерактивни елементи.

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