Konumlandırma Temelleri

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 55 / 76.

CSS'te konumlandırma, bir web sayfasındaki öğelerin konumunu kontrol etmenizi sağlayan bir özellikler kümesidir. Varsayılan olarak öğeler, HTML belgesinin normal akışına göre konumlandırılır. Ancak CSS konumlandırmasıyla öğeleri normal akıştan çıkarabilir ve bunları içeren öğeye veya görüntü alanına (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 çeşitli değerler vardır:

static: Bu, varsayılan değerdir. Öge, 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ırır, ancak öğe normal akışta yer kaplamaya devam eder.

absolute: Öğe normal akıştan çıkarılır ve kendisine en yakın konumlandırılmış üst öğeye (static dışında bir position değerine sahip bir üst öğe) göre konumlandırılır. Konumlandırılmış bir üst öğe bulunamazsa, başlangıçtaki kapsayıcı bloğa (genellikle görünüm alanına) göre konumlandırılır.

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

position özelliğini kullanmanın temel söz dizimi şöyledir:

selector {
    position: value;
}

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

Görev

Kolay

Bir alt bölümü (<div>) içeren bir üst HTML belgesi (<div>) veriliyor. Öğelerin konumlandırma bağlamını değiştirmek için position özelliğini kullanma görevin var. Aşağıdaki adımları izle:

container sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yaz. position özelliğini relative olarak ayarla. Bu, öğeyi alt öğeleri için konumlandırılmış bir ata yapar.
box sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yaz. position özelliğini absolute olarak ayarla. Bu, öğeyi normal akışın dışına çıkarır ve onu en yakın konumlandırılmış atasına (container) göre konumlandırmana olanak tanır.
.box öğesinin top özelliğini 50px ve left özelliğini 100px olarak ayarla. Bu, box öğesini konumlandırılmış atasının (container) üstünden 50 piksel ve solundan 100 piksel uzağa konumlandırır.

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>