МОДУЛ 03 / УРОК 07

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

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

HTML & CSSИнтерактивен урок12. клас

01 / НАУЧИ

Как работи свойството position?

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

При static елементът следва нормалния поток.relative го измества спрямо първоначалната му позиция, без да освобождава мястото му.absolute го изважда от нормалния поток и го позиционира спрямо най-близкия позициониран предшественик.

fixed обикновено позиционира елемента спрямо viewport, а sticky комбинира нормално разполагане със задържане при превъртане.

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

Когато поставяме етикет върху карта, задавамеposition: relative на картата и position: absolute на етикета. Така координатите му се изчисляват спрямо картата.

02 / РАЗГЛЕДАЙ

CSS Position Playground

Сравни петте режима на позициониране. Използвай плъзгачите за top и left и превъртай демонстрацията, за да изследваш sticky.

Настройки на позиционирането

positiontop20pxleft20px

CONTAINING BLOCKИнтерактивна демонстрация

Елемент 01

TARGET

Елемент 02

Елемент 03

Елемент 04

Елемент 05

Елемент 06

Превъртай вътре в демонстрацията, за да изпробвашsticky. Режимът fixed е симулиран спрямо рамката на визуализацията.

Генериран CSS

03 / ПРОМЕНИ

Експериментирай с позициониране

Промени position: relative наabsolute и наблюдавай как TARGET напуска нормалния поток. Експериментирай с координатите top и left.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<div class="stage">
  <div class="box">01</div>
  <div class="box target">TARGET</div>
  <div class="box">03</div>
</div>

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #eef2f8;
}

.stage {
  position: relative;
  min-height: 300px;
  padding: 20px;
  background: #dbe5f2;
  border-radius: 12px;
}

.box {
  width: 110px;
  padding: 20px;
  margin-bottom: 12px;
  background: #182235;
  color: white;
  border-radius: 8px;
  text-align: center;
}

.target {
  position: relative;
  top: 20px;
  left: 40px;
  background: #d52f38;
}

04 / СЪЗДАЙ

Създай карта с позициониран етикет

Постави червения етикет „НОВО“ в горния десен ъгъл на продуктовата карта, без да променяш структурата на HTML.

Изисквания към задачата

position: relative на .product-card.
position: absolute на .product-badge.
top: 12px за етикета.
right: 12px за етикета.
z-index: 2 за етикета.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<article class="product-card">
  <span class="product-badge">НОВО</span>
  <div class="product-image">PRODUCT</div>
  <h2>Нов продукт</h2>
  <p>Открий възможностите на CSS позиционирането.</p>
</article>

body {
  margin: 0;
  padding: 30px;
  font-family: Arial, sans-serif;
  background: #eef2f8;
}

.product-card {
  max-width: 340px;
  padding: 20px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 8px 30px #18223520;
}

.product-image {
  display: grid;
  place-items: center;
  height: 180px;
  border-radius: 12px;
  background: #182235;
  color: white;
  font-weight: bold;
}

.product-card h2 {
  color: #182235;
}

.product-card p {
  color: #52627b;
}

.product-badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  background: #d52f38;
  color: white;
  font-weight: bold;
}

/*
  ЗАДАЧА:
  1. Добави position: relative към .product-card.
  2. Добави position: absolute към .product-badge.
  3. Постави етикета на top: 12px.
  4. Постави етикета на right: 12px.
  5. Добави z-index: 2 към етикета.
*/

05 / ПРОВЕРИ

Провери петте CSS изисквания за позициониране на етикета.

Резултатите ще се появят тук след проверката.