Absolute Konumlandırma

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

CSS'de, mutlak konumlandırma (absolute positioning) bir öğeyi kapsayıcısının içinde tam olarak istediğiniz yere yerleştirmenize olanak tanır.

position: absolute; değerini ayarladığınızda, öğe normal düzenden çıkarılır, bu nedenle diğer öğeler o orada değilmiş gibi davranır. Kendisini, konumu ayarlanmış (static olmayan) en yakın üst öğeye göre konumlandırır. Eğer böyle bir öğe yoksa, kendisini sayfaya göre konumlandırır.

Mutlak konumlandırma kullanmak için temel sözdizimi şöyledir:

.parent {
    position: relative; /* Üst öğeyi konumlandırılmış bir ata yapın */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: Üst öğeyi hedefleyen CSS seçicisi. position: relative; ayarı, mutlak konumlandırılmış alt öğelere olanak tanır.

.child: Mutlak olarak konumlandırmak istediğiniz öğeyi hedefleyen CSS seçicisi.

position: absolute;: Bu bildirim, öğenin konumlandırma şemasını mutlak (absolute) olarak ayarlar ve onu normal akıştan çıkarır.

top, right, bottom, left: Bu özellikler, öğenin en yakın konumlandırılmış atasına göre konumunu belirtir. Piksel (px), em (em), yüzde (%) veya diğer geçerli CSS birimleri cinsinden belirtilen pozitif veya negatif değerler kullanabilirsiniz.

Örneğin:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

Bu örnekte, .parent öğesi position: relative; ile konumlandırılmış bir ata olarak ayarlanmıştır. .child öğesi position: absolute; ile mutlak olarak konumlandırılmıştır ve konumu, en yakın konumlandırılmış atasının (.parent öğesi) üstünden 50 piksel ve solundan 100 piksel uzağa ayarlanmıştır.

Görev

Kolay

Size, box1 ve box2 sınıflarına sahip iki alt bölme (<div>) içeren bir üst bölmeye (<div>) sahip bir HTML belgesi verilmiştir. Göreviniz, box2 öğesini parent içinde konumlandırmak için mutlak konumlandırma (absolute positioning) kullanmaktır. Aşağıdaki adımları izleyin:

parent sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın. Onu konumlandırılmış bir ata yapmak için position özelliğini relative olarak ayarlayın.
box2 sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın.
.box2 öğesinin position özelliğini absolute olarak ayarlayın.
.box2 öğesinin top özelliğini 30px ve right özelliğini 20px olarak ayarlayın. Bu, kutuyu konumlandırılmış atasının (parent) üstünden 30 piksel ve sağından 20 piksel uzağa konumlandıracaktır.

Kopya kağıdı

Mutlak konumlandırma (absolute positioning), bir öğeyi kapsayıcısının içinde tam olarak istediğiniz yere yerleştirir. Öğe, normal düzen akışından çıkarılır ve kendisini en yakın konumlandırılmış ataya göre konumlandırır.

Temel sözdizimi:

.parent {
    position: relative; /* Üst öğeyi konumlandırılmış bir ata yapın */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

Örnek:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

position: absolute; öğeyi normal akıştan çıkarır
top, right, bottom, left özellikleri, en yakın konumlandırılmış ataya göre konumu belirtir
Değerler piksel (px), em (em), yüzde (%) veya diğer CSS birimleri cinsinden olabilir
Konumlandırılmış bir ata yoksa, öğe sayfaya göre konumlanır

Kendin dene

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>