Halimclskn
cssders14
Ders 14: elemanların Konumlandırma
CSS konumlandırma ile, sayfanızda tam olarak istediğiniz bir öğe yerleştirebilirsiniz. Birlikte şamandıralar (bkz. dersi 13 ), konumlandırma gelişmiş ve hassas bir düzen oluşturmak için birçok olanaklar sunuyor.
Aşağıda bu derste ele alınacak:
CSS konumlandırma arkasındaki prensip
Koordinat sistemi olarak bir tarayıcı penceresi düşünün:
CSS konumlandırma arkasındaki prensip size koordinat sisteminin herhangi bir yerindeki kutusu yerleştirmek olabilir.
Diyelim ki bir başlık yerleştirmek istediğiniz söylüyorlar. Kutu modeli kullanarak (bkz. dersi 9 ) başlığı aşağıdaki gibi görünecektir:
Bu başlık belge ve belgenin soldan 200px üstünden 100px konumlandırılmış istiyorsanız, bizim CSS aşağıdaki yazabilirsiniz:
h1 { position: absolute; top: 100px; left: 200px; }
Aşağıdaki gibi sonucu olacaktır:
Gördüğünüz gibi, CSS ile konumlandırma elemanları yerleştirmek için çok hassas bir tekniktir. Bu tablolar, şeffaf görüntü veya başka bir şey kullanmak çalışmaktan çok daha kolaydır.
Mutlak konumlandırma
Mutlak konumlandırılmış bir elemanın belgedeki yer almak değil. Bu konumlandırılmış sonra boş bir alan bırakmak anlamına gelir.
Kesinlikle bir elemanı konumlandırmak için, pozisyon özelliği olarak ayarlanır mutlak . Sen sonradan özelliklerini kullanabilirsinizsol , sağ , üst ve alt kutusunu yerleştirmek.
Mutlak konumlandırma bir örnek olarak, belgenin her köşesinde 4 kutu yerleştirmek için seçin:
# Box1 { position: absolute; top: 50px; left: 50px; } # Box2 { position: absolute; top: 50px; sağ: 50px; } # Box3 { position: absolute; bottom: 50px; sağ: 50px; } # Box4 { position: absolute; bottom: 50px; left: 50px; }
Göreceli konumlandırma
Göreceli bir elemanı konumlandırmak için, özelliği konumu olarak ayarlanır göreceli . Mutlak ve bağıl konumlama arasındaki fark pozisyonu hesaplanır nasıl olduğunu.
Nispeten konumlandırılmış olduğu, bir element için pozisyon edilir belgesinde orijinal pozisyonuna hesaplandı . Yani, yukarı veya aşağı, sola, sağa elemanı hareket anlamına gelir. Bu konumlandırılmış sonra bu şekilde, eleman hala belgede bir yer alır.
Göreli konumlama bir örnek olarak, nispeten sayfada orijinal konumlarına üç resim yerleştirmek için deneyebilirsiniz. Resimler belgede orijinal pozisyonlarda boşluklar bırakır dikkat edin:
# Dog1 { position: relative; left: 350px; alt: 150px; } # Dog2 { position: relative; left: 150px; alt: 500px; } # Dog3 { position: relative; left: 50px; alt: 700 piksel; }
Özet
Önceki iki ders olarak, yüzer ve pozisyon elemanları öğrendi. Bu iki yöntem HTML tabloları ve şeffaf görüntüler eski moda yöntemlerden bazılarını kullanmak zorunda kalmadan sayfalarınızı oluşturmak için bir çok fırsat veriyoruz. Yerine CSS kullanın.Bu, daha kesin daha fazla avantaj sağlar ve aynı zamanda bakımı çok kolaydır.
