Elemanları ekran üzerinde istediğimiz yere konumlandırmak ve modern, esnek düzenler (layout) oluşturmak için neler yapabiliriz inceleyelim.

1. Display Özelliği: Elementler Nasıl Davranır?

Her HTML elementinin varsayılan bir display değeri vardır. Bu özellik, bir elementin kutu modeline göre nasıl davranacağını ve diğer elementlerle nasıl yan yana geleceğini kontrol eder. En önemli üç değeri:

block: Element bir blok kutu gibi davranır.

Her zaman bir alt satırdan başlar.

width ve height değerleri verilebilir.

Örnekler: <div>, <h1> - <h6>, <p>, <header>, <footer>

inline: Element bir metin parçası gibi davranır.

Bir sonraki element hemen yanında yer alır.

width ve height değerleri verilemez.

Örnekler: <span>, <a>, <strong>, <em>

inline-block: İki dünyanın en iyisi!

Elementler yan yana dizilir (inline gibi).

width ve height değerleri verilebilir (block gibi).

Örnekler: <img>, <button>, <input> 

.blok-element {
    display: block;
    width: 200px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
}

.inline-element {
    display: inline; /* width ve height çalışmaz */
    background-color: lightcoral;
    margin: 10px;
}

.inline-blok-element {
    display: inline-block; /* width ve height ÇALIŞIR! */
    width: 100px;
    height: 50px;
    background-color: lightgreen;
    margin: 10px;
}

2. Position Özelliği: Elementleri Konumlandırma Sanatı

position özelliği, bir elementin sayfa akışı içinde veya bir diğer elemente göre nasıl konumlandırılacağını belirler.

static (Varsayılan): Element normal sayfa akışında konumlanır. top, right, bottom, left özellikleri işe yaramaz.

relative: Elementi normal konumuna göreceli olarak kaydırır.

top, right, bottom, left özellikleri kullanılır.

Orijinal yerini korur, diğer elementler kaydırılmış halini görmezden gelir.

absolute: Elementi en yakın konumlandırılmış (positioned) atağına (position değeri static olmayan) göre mutlak olarak konumlandırır.

Eğer yoksa, sayfanın başlangıcına (<html>) göre konumlanır.

Normal akıştan tamamen çıkar, yerini başka elementler doldurur.

fixed: Elementi görünür alana (ekrana) göre sabitler. Sayfa kaydırılsa bile hep aynı yerde kalır (örneğin, sabit menüler).

sticky: relative ve fixed arasında geçiş yapar. Belirli bir kaydırma noktasına kadar relative gibi davranır, sonra fixed gibi sabitlenir (örneğin, yapışkan başlıklar). 

.kutu {
    position: relative; /* Ata element */
    width: 400px;
    height: 200px;
    background-color: #eee;
}

.icerdeki-kutu {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 100px;
    height: 50px;
    background-color: coral;
}

3. Flexbox'a Kısa Bir Giriş (Modern Layout'un Süper Kahramanı)

Geleneksel float ve position ile layout oluşturmak zordu. Flexbox, elementleri tek boyutlu (ya yatay ya dikey) olarak esnek bir şekilde hizalamak ve dağıtmak için tasarlanmış çok daha güçlü bir modüldür.

Temel prensip: Bir container (taşıyıcı) display: flex; yapılır. İçindeki direkt çocuk elementler (items - öğeler) otomatik olarak esnek hale gelir. 

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>

  

.flex-container {
    display: flex; /* Flexbox'ı etkinleştir */
    background-color: DodgerBlue;
    justify-content: center; /* Yatayda hizala (main axis) */
    align-items: center; /* Dikeyde hizala (cross axis) */
    height: 200px;
}

.flex-item {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 20px;
    font-size: 30px;
}

Önemli Flex Container Özellikleri:

justify-content: Öğeleri ana eksende (genellikle yatay) hizalar.

align-items: Öğeleri çapraz eksende (genellikle dikey) hizalar.

flex-direction: Ana eksenin yönünü belirler (row, column).

4. Hover Pseudo-Classı: Fareyle Üzerine Gelince

Bir elementin fare imleciyle üzerine gelindiğinde stil değiştirmesini sağlar. Etkileşimli ve dinamik arayüzler oluşturmanın temel taşıdır. 

/* Normal durum */
.btn {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    transition: background-color 0.3s; /* Geçiş efekti için */
}

/* Fare üzerine geldiğinde (HOVER) */
.btn:hover {
    background-color: darkblue;
    cursor: pointer; /* İmleci el işaretine çevirir */
}