Mutlak Konumlandırma

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

CSS'te mutlak konumlandırma, bir öğeyi kapsayıcısının içinde tam olarak istediğiniz yere yerleştirmenizi sağlar.

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 olarak ayarlar ve öğeyi 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

box1 ve box2 sınıflarına sahip iki alt bölüm (<div>) içeren bir üst bölüme (<div>) sahip bir HTML belgeniz var. Göreviniz, box2 öğesini parent içinde konumlandırmak için mutlak konumlandırmayı kullanmaktır. Aşağıdaki adımları izleyin:

parent sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın. Konumlandırılmış bir ata öğe hâline getirmek 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 yerleştirir.

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>