Relative Konumlandırma

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

CSS'de, bağıl konumlandırma (relative positioning), bir öğeyi belge akışındaki normal konumuna göre konumlandırmanıza olanak tanıyan bir konumlandırma şemasıdır. Bir öğe position: relative; olarak ayarlandığında, normal akışta kalır, ancak daha sonra onu orijinal konumundan kaydırmak için top, right, bottom ve left özelliklerini kullanabilirsiniz.

Göreceli konumlandırmayı kullanmak için temel sözdizimi şöyledir:

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: relative;: Bu bildirim, öğenin konumlandırma şemasını göreli (relative) olarak ayarlar.
top, right, bottom, left: Bu özellikler, öğenin normal konumundan olan kaymasını (offset) belirtir. Piksel (px), em (em), yüzde (%) veya diğer geçerli CSS birimleri cinsinden belirtilen pozitif veya negatif değerler kullanabilirsiniz.

Örneğin:

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Bu örnekte, box sınıfına sahip öğe, doküman akışındaki normal konumundan 20 piksel aşağıda ve 30 piksel sağda konumlandırılacaktır. Orijinal olarak kapladığı alan korunacak ve diğer öğeler bu alana akmayacaktır.

Görev

Kolay

Size, box1, box2 ve box3 sınıflarına sahip üç alt bölme (<div>) içeren bir HTML belgesi verilmiştir. Göreviniz, box2 öğesini taşımak için göreceli konumlandırmayı kullanmaktır. Aşağıdaki adımları izleyin:

box2 sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın.
.box2 öğesinin position özelliğini relative olarak ayarlayın.
.box2 öğesinin top özelliğini 20px ve left özelliğini 40px olarak ayarlayın. Bu, kutuyu normal konumundan 20 piksel aşağı ve 40 piksel sağa taşıyacaktır.

Kopya kağıdı

Göreceli (relative) konumlandırma, bir öğeyi position: relative; kullanarak doküman akışındaki normal konumuna göre konumlandırmanıza olanak tanır:

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

Öğe normal akışta kalır, ancak top, right, bottom ve left özelliklerini kullanarak onu kaydırabilirsiniz. Orijinal alan korunur.

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Bu, öğeyi normal konumundan 20px aşağı ve 30px sağa taşır.

Kendin dene

<html>
<head>
    <title>Relative Positioning</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
        <div class="box3">Box 3</div>
    </div>
</body>
</html>