Tasarımda bir öğeyi diğerinden daha yüksek yapmanın…

Bir öğenin diğerinin üzerinde olmasını sağlamak için birkaç yöntem vardır:

z-index: En yaygın yöntem. position farklı olan (yani static olmayan) konumlandırılmış öğelere uygulanır. Daha yüksek z-index değeri olan öğe, aynı bağlamda daha düşük z-index değerine sahip öğenin üzerinde görünür.
```
/* Öğrenci-1, Öğrenci-2'nin altında olacak */
.element-1 {
  position: relative;
  z-index: 1;
}

.element-2 {
  position: relative;
  z-index: 2;
}
```
DOM sırası: Açıkça konumlandırma ve z-index olmadan, HTML kodunda daha sonra yer alan öğe görsel olarak önceki öğelerin üzerinde olur.
```

<div class="element-1"></div>
<div class="element-2"></div>
```
Konumlandırma özellikleri: position: absolute veya position: fixed gibi özelliklerin kullanımı, otomatik olarak yeni bir yığılma bağlamı oluşturur ve öğeyi belge akışının üzerinde konumlandırır (başka bir şey belirtilmedikçe).
```
.element-absolute {
  position: absolute;
  /* Diğer konumlandırma özellikleri */
}
```
Flexbox/Grid (Order): Flexbox ve Grid düzenlerinde, order özelliği, öğelerin görsel sırasını değiştirmeye olanak tanır, ancak doğrudan z-index ile aynı bağlamda yığılma bağlamını etkilemez.
```
.container {
  display: flex;
}

/* Öğrenci-2 görsel olarak ilk olacak */
.element-1 {
  order: 2;
}

.element-2 {
  order: 1;
}
```
Dönüşümler (Transform): transform özelliğinin kullanımı, yerel bir yığılma bağlamı oluşturur ve dönüştürülmüş öğe, açık konumlandırma ve z-index olmadan bile diğerlerinin üzerinde görünebilir.
```
.element-transformed {
  transform: translateZ(1px); /* veya başka bir dönüşüm */
}
```

Yöntem seçimi, bağlam ve istenen etkiye bağlıdır. Çoğu durumda, yığılmayı kontrol etmek için z-index ve position birlikte kullanılır.

Tasarımda bir öğeyi diğerinden daha yüksek yapmanın yolları nelerdir?