Skip to content

Mutlak ve Göreli – CSS Konumlandırmasını Açıklamak

19 de Mayıs de 2021

CSS konumlandırma, uzun süredir web sitesi düzenleri oluşturmanın önemli bir parçası olmuştur. Flexbox ve CSS Grid gibi CSS mizanpaj tekniklerinin yükselişine rağmen, konumlandırma hala herhangi bir web tasarımcısının hile çantasında önemli bir yere sahiptir. CSS konumlandırmayı kullanırken yapmanız gereken ilk şey, tarayıcıya belirli bir öğe için mutlak veya göreceli konumlandırma kullanıp kullanmayacağınızı bildirmek için konum için CSS özelliğini oluşturmaktır. Ayrıca bu iki konumlandırma özelliği arasındaki farkı anlamanız gerekir. Mutlak ve göreli, web tasarımında en sık kullanılan iki CSS konum özelliği olsa da, aslında position özelliğinin dört durumu vardır:

  • statik
  • mutlak
  • akraba
  • sabit

Statik Konumlandırma

Statik, bir web sayfasındaki herhangi bir öğe için varsayılan konumdur. Bir öğenin konumunu tanımlamazsanız, bu statiktir, yani HTML belgesinde nerede olduğuna ve o belgenin normal akışı içinde nasıl görüntülendiğine bağlı olarak ekranda görüntülendiği anlamına gelir. Gibi konumlandırma kuralları uygularsanız üst veya ayrıldı statik konumu olan bir öğeye bu kurallar göz ardı edilir ve öğe normal belge akışında göründüğü yerde kalır. Varsayılan değer olduğu için nadiren CSS’de bir öğeyi statik bir konuma ayarlamanız gerekir.

Mutlak CSS Konumlandırma

Mutlak konumlandırma muhtemelen anlaşılması en kolay CSS konumudur. Bu CSS konum özelliği ile başlarsınız: position: mutlak;

Bu değer, tarayıcıya, konumlandırılacak her şeyin belgenin normal akışından kaldırılması ve bunun yerine sayfada tam bir konuma yerleştirilmesi gerektiğini söyler. Bu, o elemanın statik olmayan olarak konumlandırılmış en yakın atasına göre hesaplanır. Mutlak şekilde konumlandırılmış bir öğe, belgenin normal akışının dışına çıkarıldığı için, HTML’de kendisinden önceki veya sonraki öğelerin web sayfasında nasıl konumlandırıldığını etkiler. Örnek olarak, bir göreli değeri kullanılarak konumlandırılmış bir bölümünüz varsa ve bu bölümün içinde, bölümün üstünden 50 piksel konumlandırmak istediğiniz bir paragrafınız varsa, bir konum değeri eklersiniz. mutlak ofset değeri ile birlikte bu paragrafa 50px üzerinde üst özellik, şunun gibi: konum: mutlak;
üst: 50px;

Bu kesinlikle konumlandırılmış öğe, normal akışta başka ne görüntülenirse gösterilsin, her zaman görece konumlandırılmış bölümün tepesinden 50 piksel görüntüler. Kesin olarak konumlandırılmış öğeniz, bağlamı olarak göreceli olarak konumlandırılmış olanı kullanır ve kullandığınız konumlandırma değeri buna göre değişir. Kullanabileceğiniz dört konumlandırma özelliği şunlardır:

  • üst
  • sağ
  • alt
  • ayrıldı

İkisini de kullanabilirsiniz üst veya alt – bir öğe bu değerlerin her ikisine göre konumlandırılamayacağı için – ve ikisi de sağ veya ayrıldı. Bir öğe mutlak bir konuma ayarlanmışsa, ancak statik olmayan olarak konumlandırılmış üstleri yoksa, sayfanın en üst düzey öğesi olan gövde öğesine göre konumlandırılır.

Göreli Konumlandırma

Göreli konumlandırma, mutlak konumlandırma olarak aynı dört konumlandırma özelliğini kullanır, ancak öğenin konumunu en yakın statik olmayan şekilde konumlandırılmış atasına dayandırmak yerine, öğenin hala normal akışta olsaydı olacağı yerden başlar. Örneğin, web sayfanızda üç paragraf varsa ve üçüncüsünde bir konum: göreceli üzerine yerleştirilen stil, konumu mevcut konumuna göre kaydırılır.

Paragraf 1.

2. paragraf.

Paragraf 3. Yukarıdaki örnekte, üçüncü paragraf kap öğesinin sol tarafından 2em uzaklıkta, ancak yine de ilk iki paragrafın altında konumlandırılmıştır. Belgenin normal akışında kalır ve biraz kayar. Eğer değiştirirsen pozisyon: mutlak, onu izleyen herhangi bir şey, artık belgenin normal akışında olmadığı için onun üzerinde görüntülenir. Bir web sayfasındaki öğeler genellikle bir değer ayarlamak için kullanılır konum: göreceli ofset değeri belirlenmeden, bu, elemanın tam olarak normal akışta görüneceği yerde kaldığı anlamına gelir. Bu, yalnızca o öğeyi, diğer öğelerin kesinlikle konumlandırılabileceği bir bağlam olarak oluşturmak için yapılır. Örneğin, tüm web sitenizi çevreleyen, sınıf değeri olan bir bölümünüz varsa konteynerweb tasarımında yaygın bir senaryo olan bu bölüm, akraba böylece içindeki her şey onu bir konumlandırma bağlamı olarak kullanabilir.

Sabit Konumlandırma Nedir?

Sabit konumlandırma, mutlak konumlandırmaya çok benzer. Öğenin konumu, mutlak modelle aynı şekilde hesaplanır, ancak daha sonra sabit öğeler o konumda sabitlenir – neredeyse bir filigran gibi. Sayfadaki diğer her şey daha sonra bu öğenin ötesine geçer. Bu özellik değerini kullanmak için şunları ayarlarsınız: position: fixed;

Unutmayın, sitenizde bulunan bir öğeyi düzelttiğinizde, web sayfanız yazdırıldığında bu öğe o konumda yazdırılır. Örneğin, öğeniz sayfanızın en üstünde sabitlenmişse, sayfanın üstüne sabitlendiği için yazdırılan her sayfanın üstünde görünecektir. Yazdırılan sayfaların sabit öğeleri nasıl görüntülediğini değiştirmek için ortam türlerini kullanabilirsiniz: @media ekranı {
h1 # ilk {konum: sabit; }
}
@media print {
h1 # ilk {konum: statik; }
}

Biçim mla apa chicago Alıntıınız

Kyrnin, Jennifer. “Mutlak ve Göreli – CSS Konumlandırmasını Açıklamak.” ThoughtCo, Mayıs. 14, 2021, thinkco.com/absolute-vs-relative-3466208.
Kyrnin, Jennifer. (2021, 14 Mayıs). Mutlak ve Göreli – CSS Konumlandırmasını Açıklamak. Https://www.thoughtco.com/absolute-vs-relative-3466208 adresinden erişildi
Kyrnin, Jennifer. “Mutlak ve Göreli – CSS Konumlandırmasını Açıklamak.” ThoughtCo. https://www.thoughtco.com/absolute-vs-relative-3466208 (19 Mayıs 2021’de erişildi).