CSS position değerleri nelerdir?

Question

Accepted Answer

`position` bir öğenin nasıl yerleştirildiğini ve offset özelliklerinin (`top`/`right`/`bottom`/`left`) uygulanıp uygulanmadığını kontrol eder.

```css
.a { position: static; }   /* default — normal flow, offsets IGNORED */
.b { position: relative; } /* normal flow, but offsets shift it from itself */
.c { position: absolute; } /* removed from flow, positioned vs nearest positioned ancestor */
.d { position: fixed; }    /* removed from flow, positioned vs the VIEWPORT */
.e { position: sticky; }   /* hybrid: normal until a scroll threshold, then sticks */
```

## relative + absolute: anahtar eşleşme

`absolute` bir öğeyi **konumlandırılmış en yakın atasına** (`static` dışındaki her şey) göre konumlandırır. Bu yüzden ebeveyn üzerinde `position: relative` ayarlayarak onu referans noktası haline getirirsiniz:

```css
.card {
  position: relative;   /* becomes the positioning context */
}
.badge {
  position: absolute;   /* positioned relative to .card */
  top: 8px;
  right: 8px;           /* pins the badge to the card's top-right corner */
}
```

Bu relative-parent / absolute-child deseni her yerde görülür: badge'ler, açılır menüler, araç ipuçları, kapat düğmeleri.

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
```

- **fixed** — görünüm alanına kilitlenmişdir (her zaman görünür), örneğin kalıcı bir gezinme çubuğu.
- **sticky** — eşik (`top: 0`) değerine ulaşana kadar göreceli olarak davranır, ardından konteyner görünümdeyken orada kalır — bölüm başlıkları için harika.

## Yaygın bir tuzak

`absolute`/`fixed` öğeler **normal akıştan çıkarılır**, bu nedenle alan ayırmaz — kardeşler orada olmamış gibi davranır, bu da çakışmaya neden olabilir. Bunun için plan yapın (örneğin sabit bir gezinme çubuğunu telafi etmek için padding ekleyin).

## Neden önemli

`position` yer paylaşımları, yapışkan başlıklar, modallar, açılır menüler ve badge'ler için gereklidir.

Relative-parent/absolute-child ilişkisi ve fixed-vs-sticky ayrımı, sürekli kullandığınız pratik özüdür.