CSS'de position Nedir?

Position, CSS'in en önemli özelliklerinden biridir. Position, bir HTML elementinin hangi konumda veya konumlandırılmış olduğunu belirler. Bu özellik, elementlerin birbiriyle ilişkilerini, belirli değerlerle ayarlamayı ve sayfa düzeninde tam olarak istenen yere yerleştirme olanağı sağlar.
CSS'de position, 4 temel değerle kullanılır: static, relative, absolute ve fixed. Başka bir deyişle, bir elementin konumu, kendisi veya diğer elementlerin konumlarına göre sabitlenebilir veya hareketli olabilir.
1. Static: Bu varsayılan değer, hiçbir konumlandırma belirtilmemiş demektir. Element, belirlenen yerde kalır ve diğer elementlerin üzerine yerleştirilir.
Örnek kod:
```css
div{
position: static;
}
```
2. Relative: Bu değer, elementin kendisinin veya diğer elementlerin konumlarına göre belirli bir mesafede hareket edebilmesine olanak tanır. Elementin önceki konumuna bir referans konum belirlemek için kullanılır.
Örnek kod:
```css
div{
position: relative;
left: 50px;
top: 20px;
}
```
3. Absolute: Bu değer, elementin en yakın konumlandırılmış üst öğesine göre konumlandırılmasını sağlar. Başka bir deyişle, elementin en yakın üst öğesi, belirli bir pozisyonda belirlendiğinden, konum sıfır olarak belirlenir.
Örnek kod:
```css
div{
position: absolute;
left: 100px;
top: 50px;
}
```
4. Fixed: Bu değer, elementin sayfanın görünümünün değişmesine rağmen sabit bir konumda kalmasını sağlar. Sayfada kaydırma yapılırken dahi, bu element belirtilen konumda sabit kalır.
Örnek kod:
```css
div{
position: fixed;
right: 20px;
bottom: 20px;
}
```
Position, CSS'de en çok tercih edilen özelliklerden biridir çünkü elementlerin düzenli bir şekilde yerleştirilmesini kolaylaştırır. Bu özellikle birlikte, elementler hareketli veya sabit belirtilen konumda olabilirler.