Konumlandırma Temelleri

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 55 / 76.

CSS'de, konumlandırma web sayfasındaki öğelerin konumunu kontrol etmenizi sağlayan bir dizi özelliktir. Varsayılan olarak, öğeler HTML belgesinin normal akışına göre konumlandırılır. Ancak, CSS konumlandırma ile öğeleri normal akışın dışına çıkarabilir ve onları kapsayıcı öğelerine veya viewport'a (tarayıcı penceresinin görünür alanı) göre belirli konumlara yerleştirebilirsiniz.

position özelliği için her birinin kendine özgü davranışı olan birkaç değer mevcuttur:

static: Bu varsayılan değerdir. Öğe, belgenin normal akışına göre konumlandırılır. top, right, bottom ve left özelliklerinin hiçbir etkisi yoktur.

relative: Öğe, normal konumuna göre konumlandırılır. top, right, bottom ve left özelliklerinin ayarlanması öğeyi normal konumundan uzaklaştıracaktır, ancak öğe normal akışta hala yer kaplamaya devam eder.

absolute: Element normal akıştan çıkarılır ve en yakın konumlandırılmış üst öğesine (static dışında bir konuma sahip olan bir üst öğe) göre konumlandırılır. Eğer konumlandırılmış bir üst öğe bulunamazsa, başlangıç kapsayıcı bloğuna (genellikle viewport) göre konumlandırılır.

fixed: Öğe normal akıştan çıkarılır ve görünüm alanına (viewport) göre konumlandırılır. Sayfa kaydırıldığında bile yerinde sabit kalır.

İşte position özelliğini kullanmak için temel sözdizimi:

selector {
    position: value;
}

value: İstenen konumlandırma davranışı (örneğin, static, relative, absolute, fixed, sticky).

Görev

Kolay

Bir üst bölüm (<div>) ve içinde bir alt bölüm (<div>) içeren bir HTML belgesi size verilmiştir. Göreviniz, öğelerin konumlandırma bağlamını değiştirmek için position özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

container sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın. position özelliğini relative olarak ayarlayın. Bu, onu çocukları için konumlandırılmış bir ata (ancestor) yapacaktır.
box sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın. position özelliğini absolute olarak ayarlayın. Bu, onu normal akışın dışına çıkaracak ve en yakın konumlandırılmış atasına (container) göre konumlandırmanıza olanak tanıyacaktır.
.box öğesinin top özelliğini 50px ve left özelliğini 100px olarak ayarlayın. Bu, kutuyu konumlandırılmış atasının (container) üstünden 50 piksel ve solundan 100 piksel uzağa konumlandıracaktır.

Kopya kağıdı

position özelliği, öğelerin bir web sayfasında nasıl konumlandırılacağını kontrol eder:

selector {
    position: value;
}

Konumlandırma değerleri:

static: Normal doküman akışındaki varsayılan konumlandırma
relative: Normal konumuna göre konumlandırılır, akışta hala yer kaplar
absolute: Normal akıştan çıkarılır, en yakın konumlandırılmış üst öğeye (ancestor) göre konumlandırılır
fixed: Normal akıştan çıkarılır, görünüm alanına (viewport) göre konumlandırılır, kaydırma yapıldığında sabit kalır

Konumu ayarlamak için top, right, bottom ve left özelliklerini kullanın (static hariç).

Kendin dene

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>