HAZIRLAYAN: MIRSEYID MIR-HAZIYEV

CSS konumlandırma, web sayfalarının düzenini kontrol etmeye yardımcı olan temel bir özelliktir. HTML öğelerini içerdikleri bloğa göre veya sayfada belirli bir noktaya göre konumlandırmanıza olanak tanır. Dört tür CSS konumlandırması vardır: Static, Relative, Absolute ve Fixed Positioning

Bu yazıda, her birine daha yakından bakacağız ve bunları CSS kodunuzda nasıl kullanacağınızı anlayacağız.

2. Göreli Konumlandırma(Relative Positioning):

Relative konumlandırma, sayfanın normal akışındaki konumunu korurken bir HTML öğesini normal konumundan taşımanıza olanak tanır. Bunu yapmak için, belirtilen bir değerle birlikte Static konumlandırmanın aksine, top, bottom, left veya right özelliklerini kullanabilirsiniz. Belirtilen değer, öğenin orijinal konumuna göredir. Örneğin, top özelliğini 20px olarak ayarlarsanız, öğe orijinal konumundan 20 piksel aşağı hareket eder. Öğe hala normal belge akışının bir parçasıdır, ancak konumu orijinal konumuna göre ayarlanmıştır. Diğer içerikler, öğe tarafından bırakılan herhangi bir boşluğa sığacak şekilde ayarlanmayacaktır.

3. Mutlak Konumlandırma (Absolute Positioning):

Mutlak konumlandırma, belge akışındaki konumu ne olursa olsun, bir HTML öğesini tam olarak bir web sayfasında konumlandırmanıza olanak tanır. Bir öğe mutlak olarak konumlandırıldığında, normal belge akışından çıkarılır ve en yakın konumlandırılmış ata öğesine göre konumlandırılır.

Mutlak olarak konumlandırılmış bir öğenin tam konumunu belirtmek için top, bottom, left ve right özelliklerini kullanabilirsiniz. Konumlandırılmış ata öğe yoksa öğe, genellikle tarayıcı penceresi olan ilk içeren bloğa göre konumlandırılır.

4.  Sabit Konumlandırma (Fixed Positioning):

Sabit konumlandırma, mutlak konumlandırmaya benzer, ancak öğe, içerdiği blok yerine görünüme göre konumlandırılır. Bu, sayfa kaydırılsa bile öğenin aynı konumda kalacağı anlamına gelir. Sabit konumlandırmayı kullanmak için, belirli bir değerle birlikte top, bottom, left veya right özelliklerini kullanabilirsiniz.

CSS ile konumlandırma:

Her Konumlandırma Türü Ne Zaman Kullanılır:

Ⅰ. Normal belge akışında görünmesini ve orijinal konumlarından taşınmamasını istediğiniz öğeler için statik konumlandırmayı kullanın.

Ⅱ. Orijinal konumlarından taşımak, ancak yine de normal belge akışındaki konumlarını korumak istediğiniz öğeler için Relative (Göreli) konumlandırmayı kullanın.

Ⅲ. Konumlandırılmış en yakın atalarına veya sayfanın tamamına göre konumlandırmak istediğiniz öğeler için Absolute(Mutlak) konumlandırmayı kullanın.

Ⅳ. Görünüme göre konumlandırmak istediğiniz öğeler için Fixed (Sabit) konumlandırma kullanın ve sayfa kaydırıldığında bile öğenin aynı konumda kalmasını sağlayın.

❝  Sonuç olarak, CSS konumlandırma, HTML öğelerini web sayfanızda taşımanıza vekonumlandırmanıza olanak tanır. Statik, Relative (Göreli), Absolute (Mutlak) ve Fixed (Sabit) konumlandırma arasındaki farkları anlayarak, her öğe için uygun konumlandırma türünü seçebilirve web sayfanız için iyi tasarlanmış bir düzen oluşturabilirsiniz.  ❞