CSS'de relative Nedir?

CSS'de relative, bir elemanın kendisi için belirlenmiş bir konumdan, diğer bir elemanın konumuna göre hareket etmesini sağlayan bir pozisyonlama değeridir.
Relative konum, elemanın normal pozisyonunu korurken, belirtilen değere göre hareket etmesini sağlar. Bu değerlerden biri olan top, bottom, left veya right kullanılarak, elemanın belirtilen yönlerden herhangi birinde yapacağı hareket belirlenebilir. Eğer bu hareketle eleman, başka bir elemanın içerisine girecek olursa, bu eleman da hareket eder ve bozulma yaşanmaz.
Örnek olarak aşağıdaki kod bloğuna bakalım:
```css
div {
position: relative;
left: 50px;
top: 50px;
background-color: blue;
width: 100px;
height: 100px;
}
```
Bu kod bloğunda, div elementi için relative bir pozisyon belirlenmiştir. left ve top değerleri olarak da sırasıyla 50px sağa ve 50px aşağıya kaydırılmıştır. Bu sayede elemanın normal konumu bozulmamış, sadece belirtilen değerlere göre hareket etmiştir.
Relative konum, özellikle responsive tasarımlarda sıklıkla kullanılır. Çünkü elemanın normal konumu korunduğundan, farklı ekran boyutlarına ve cihazlara uyum sağlamak daha kolay hale gelir.
Aşağıdaki örnek kod bloğunda, relative pozisyon yardımıyla, bir kutunun sağ üst köşeye taşınması sağlanmıştır:
```css
div {
position: relative;
top: -50px;
right: -50px;
background-color: orange;
width: 100px;
height: 100px;
}
```
Bu kod bloğunda, div elementi için relative bir pozisyon belirlenmiştir. top ve right değerleri olarak da sırasıyla, yukarıda 50px ve sağda 50px hareket ettirilmiştir. Bu hareket, elemanın normal konumunu bozmadan, sağ üst köşeye taşınmasını sağlamıştır.
Sonuç olarak, relative konum bir elemanın normal konumunu koruyarak, belirlenen değerlere göre hareket etmesini sağlayan bir pozisyonlama değeridir. Responsive tasarımlarda sıklıkla kullanılan bir tekniktir ve CSS kodlarına kolaylıkla eklenebilir.