Göreli Konumlandırma

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

CSS'te göreli konumlandırma, bir öğeyi belge akışındaki normal konumuna göre konumlandırmanıza olanak tanıyan bir konumlandırma düzenidir. Bir öğe position: relative; olarak ayarlandığında normal akışta kalır, ancak daha sonra top, right, bottom ve left özelliklerini kullanarak öğeyi özgün konumundan kaydırabilirsiniz.

Göreli konumlandırmayı kullanmanın temel sözdizimi şöyledir:

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

position: relative;: Bu bildirim, öğenin konumlandırma düzenini göreli olarak ayarlar.
top, right, bottom, left: Bu özellikler, öğenin normal konumundan olan uzaklığını belirtir. Piksel (px), em (em), yüzde (%) veya diğer geçerli CSS birimleriyle belirtilen pozitif ya da negatif değerleri kullanabilirsiniz.

Örneğin:

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

Bu örnekte, box sınıfına sahip öğe, belge akışındaki normal konumundan 20 piksel aşağıya ve 30 piksel sağa konumlandırılacaktır. Başlangıçta kapladığı alan korunacak ve diğer öğeler bu alana akmayacaktır.

Görev

Kolay

box1, box2 ve box3 sınıflarına sahip üç alt bölüm (<div>) içeren bir HTML belgesindeki bir bölüme (<div>) sahipsiniz. Göreviniz, box2 öğesini taşımak için göreli 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ğıya ve 40 piksel 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>