Öğeleri CSS Konum Özelliğine Sahip Bir Web Sayfasına Konumlandırma

Nisan 30, 2024

Basamaklı Stil Sayfaları'ndan önce, web sayfanızdaki nesnelerin konumu üzerinde sahip olduğunuz kontrolle sınırlı kaldınız. Konumlamayı biraz kontrol etmek için HTML tablosunu kullanabilirsiniz, ancak bu çok kesin değildi. Artık CSS ile, her bir öğenin web sayfanıza nasıl yerleştirildiği üzerinde kesin bir kontrole sahip olabilirsiniz.

Web sayfanızdaki öğeleri konumlandırmak için CSS position özelliğini kullanmadan önce, web tarayıcısıyla iletişim kurmak için kullanılan terminolojiyi tartışmamız gerekir. CSS yalnızca web sayfanızın genişliğini ve yüksekliğini değil, aynı zamanda web tarayıcısının boyutlarını da dikkate alır.

Tarayıcı Genişliği ve Yüksekliği
İlk başta, bunun açık tarayıcı penceresini ifade ettiğini düşünebilirsiniz. Ancak, kontroller ve düğmeler dahil olmak üzere tüm tarayıcıyı ifade eder.
Canlı Genişlik ve Yükseklik
Bu, tarayıcının görüntüleme alanı için kullanılan terimdir. Kontrolleri içermez.
Belge Genişliği ve Yüksekliği
Bu, web sayfanızın tüm genişliği ve yüksekliğidir. Bu boyutlar Canlı genişlik ve yükseklikten daha büyükse, tarayıcı gerektiğinde kaydırma çubuklarını görüntüler.

Artık web sayfanızın bölümlerini CSS kullanarak konumlandırabileceğiniz sınırların şartlarını bildiğinize göre, dört konum değerine bakalım.

Statik
Bu varsayılan ayardır. Bir öğe için aksini belirtmedikçe, tarayıcı statik konumlandırma kullanır. Göründüğü gibi, statik konumlandırma ile web sayfasındaki öğeleri yeniden konumlandıramazsınız. Peki, tarayıcı her nesneyi web sayfanıza nereye koyacağınızı nasıl belirler? Her öğeyi HTML kodunuzda göründükleri sırayla konumlandırır. Bir logo resminiz, daha sonra bir selamlama ve ardından HTML'nizdeki telif hakkı bildirimi varsa, tarayıcı bunları web sayfasına bu sırayla yerleştirir. Selamlamayı logo görüntüsünün üzerine taşıyamazsınız.
bağıl
Göreli konumlandırma, HTML kodundaki öğelerin sırasının sayfadaki öğelerin akışını kontrol etmesi bakımından statikle aynı şekilde çalışır. Ancak, bir öğenin web sayfasındaki diğer öğelere göre konumunu kontrol etmek için göreli konumlandırma kullanabilirsiniz.
kesin
Bir öğeyle mutlak konumlandırma kullandığınızda, bu öğeyi web sayfasının geri kalanından bağımsız hale getirir. Yerleşimi artık HTML'nin sırasına göre belirlenmediğinden, öğeyi konumlandırmak için X ve Y koordinatlarını kullanmanız gerekir.
Sabit
Bu, mutlak konumlandırma ile aynı şekilde çalışır. Ancak, sabit konumlandırmaya sahip öğe web sayfası ile kaydırılmaz. Sayfa yukarı doğru kaydırıldıkça görünür kalmak istediğiniz bir logo veya menü için kullanabileceğiniz hoş bir özelliktir.

Video Talimatları: CSS Efecto - 02 PseudoElementos @JoseCodFacilito (Nisan 2024).

Öğeleri CSS Konum Özelliğiyle Web Sayfasına Konumlandırma, HTML, CSS, CSS konum özelliği, statik konumlandırma, göreli konumlandırma, mutlak konumlandırma, sabit konumlandırma, bir web sayfasındaki öğelerin konumlandırılması, bir web sayfasındaki öğelerin konumlandırılması için CSS kullanma

Önceki Makale

Sonraki Makale

İlgili Makaleler

bilgisayarlar

RESPONSE Nesnesini Kullanma

Nisan 2024

Peki bu yanıt nesnesi ne için? Yanıt nesnesi, sunucudan kullanıcıya çıktı göndermek için kullanılır. Kendisine atanan birçok yöntem var. Çoğunlukla kullanılan bazıları: 1. Response.Write...

bilgisayarlar

Makai Kingdom - Strateji RPG

Nisan 2024

Makai Kingdom, Disgaea, La Pucelle ve Phantom Brave'yi yaratan aynı insanlar tarafından bize getirildi. Sen rasgele kurullarında ızgara mücadele hareketli karikatür tarzı karakterler vardır. ...