CSS konumlandırma, sadece X'ten daha fazladır, Y Koordinatları
CSS konumlandırma, web sitesi düzenleri oluşturmanın önemli bir parçasıydı. Flexbox ve CSS Grid gibi yeni CSS mizanpaj tekniklerinin yükselmesiyle bile, konumlandırma, herhangi bir web tasarımcısının püf noktalarında önemli bir yere sahiptir.
CSS konumlandırmayı kullanırken, yapmanız gereken ilk şey, belirli bir öğe için mutlak veya göreceli konumlandırma kullanacaksanız tarayıcıya söyleyeceğiniz konum için CSS özelliğini kurmaktır. Ayrıca, bu iki konumlandırma özelliği arasındaki farkı açıkça anlamanız gerekir.
Mutlak ve göreceli en çok web tasarımında kullanılan iki CSS pozisyonu özelliğiyken, aslında pozisyon özelliğine dört durum vardır:
- statik
- kesin
- bağıl
- sabit
Statik, bir web sayfasındaki herhangi bir öğe için varsayılan konumdur. Bir elemanın konumunu tanımlamazsanız, statik olacaktır. Bu, ekranda, HTML belgesinde nerede bulunduğuna ve o belgenin normal akışı içinde nasıl görüntüleneceğine bağlı olarak görüntüleneceği anlamına gelir.
Statik bir konuma sahip bir öğeye üst veya sol gibi konumlandırma kuralları uygularsanız, bu kurallar göz ardı edilir ve öğe normal belge akışında göründüğü yerde kalır. Aslında, eğer varsayılan değer olan CSS'deki bir statik pozisyona bir eleman ayarlamanız gerekiyorsa nadiren nadiren olurdu.
Mutlak CSS Konumlandırma
Mutlak konumlandırma, muhtemelen anlaşılması en kolay CSS pozisyonudur. Bu CSS konum özelliğiyle başlarsınız:
pozisyon: mutlak;Bu değer, tarayıcıya konumlandırılacak her şeyin belgenin normal akışından kaldırılması ve bunun yerine sayfadaki tam bir konuma yerleştirilmesi gerektiğini söyler. Bu, o elementin en statik olmayan konumlandırılmış atasına dayanarak hesaplanır.
Mutlak olarak yerleştirilmiş bir elemanın belgenin normal akışından çıkarılmasından dolayı, HTML'den önceki veya sonraki öğelerin web sayfasında nasıl konumlandırıldığını etkilemez.
Örnek olarak - bir akrabanın değeri kullanılarak konumlandırılmış bir bölümünüz varsa (bu değere kısa bir süre bakacağız), ve bu bölümün içinde, bölümün en üstünden 50 piksel konumlandırmak istediğiniz bir paragrafınız var demektir. bu paragrafa "mutlak" bir konum değeri ekleyerek "top" özelliğinde 50px'lik bir ofset değeriyle birlikte ekleyecektir.
pozisyon: mutlak; üst: 50px;Bu kesinlikle konumlandırılmış eleman her zaman göreceli olarak konumlandırılmış bölümün üstünden 50 piksel görüntüler - normal akışta başka ne görüntüler olursa olsun. "Kesinlikle" konumlandırılmış öğeniz, göreceli olarak yerleştirilmiş olanını bağlamı olarak kullandı ve kullandığınız konum değeri bununla ilgili.
Kullanabileceğiniz dört konumlandırma özelliği şunlardır:
- üst
- sağ
- alt
- ayrıldı
Üst veya alttan (bir öğe bu değerlerin her ikisine göre konumlandırılamadığından) ve sağdan veya soldan kullanabilirsiniz.
Bir eleman mutlak bir konuma ayarlanmışsa, fakat statik olarak konumlandırılmamış ataları yoksa, o zaman sayfanın en üst düzey elemanı olan vücut elemanına göre konumlandırılacaktır.
Göreli konumlandırma
Göreceli konumlandırmadan bahsettik, o zaman şimdi şu mülke bakalım.
Göreceli konumlandırma, mutlak konumlandırma ile aynı dört konumlandırma özelliğini kullanır, ancak elemanın konumunu en yakın statik olmayan şekilde konumlandırılmış ataya dayandırmak yerine, öğenin hala normal akışta olması durumunda nerede olacağıyla başlar.
Örneğin, web sayfanızda üç paragrafınız varsa ve üçüncüsü üzerinde "konum: göreceli" stili varsa, konumu geçerli konumuna göre kaydırılır.
Paragraf 1.
Paragraf 2.
Paragraf 3.
Yukarıdaki örnekte, üçüncü paragraf, konteynır elemanının sol tarafından 2em olarak konumlandırılacaktır, ancak yine de ilk iki paragrafın altında olacaktır. Belgenin normal akışında kalır ve sadece biraz dengelenir. Onu pozisyona değiştirdiyseniz: mutlak; Bunu takip eden herhangi bir şey, bunun üstünde görüntülenecektir, çünkü artık belgenin normal akışında olmayacaktı.
Bir web sayfasındaki elemanlar genellikle bir konum değerini ayarlamak için kullanılır: bir ofset değeri bulunmayan göreceli olarak, yani öğenin normal akışta tam olarak nerede görüntüleneceği anlamına gelir. Bu, yalnızca bu elementi diğer unsurların kesinlikle konumlandırılabileceği bir bağlam olarak kurmak için yapılır. Örneğin, web sitenizin tamamını bir "konteyner" değeriyle (web tasarımında çok yaygın bir senaryo olan) içeren bir bölümünüz varsa, bu bölümün içindeki herhangi bir görüntünün kullanılabilmesi için bu bölüm bir göreceli konuma ayarlanabilir. bir konumlandırma bağlamı olarak.
Sabit Konumlandırma Nedir?
Sabit konumlandırma mutlak konumlamaya çok benzer. Elemanın pozisyonu mutlak model ile aynı şekilde hesaplanır, ancak sabit elemanlar o konumda sabitlenir - neredeyse bir filigran gibi. Sayfadaki diğer her şey daha sonra bu öğeyi geçecek.
Bu özellik değerini kullanmak için şunları yaparsınız:
konum: sabit;Sitenizdeki bir öğeyi düzelttiğinizde, Web sayfanız yazdırıldığında bu konumda yazdırılacağını unutmayın. Örneğin, öğeniz sayfanızın en üstünde sabitlenmişse, yazdırılan her sayfanın en üstünde görünecektir - çünkü sayfanın üst kısmına sabitlenmiştir. 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 # first {position: sabit; }} @media print {h1 # first {pozisyon: statik; }}Jennifer Krynin tarafından yazılmış orijinal makale. 1/7/16 tarihinde Jeremy Girard tarafından düzenlendi.