“Anın tadını çıkarıyordum.Tıpkı paraşütü açılmayan bir paraşütçünün rüzgarın tadını çıkarttığını gibi“

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:

Koordinatları ile Browserwindow

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:

Bir kutu içinde Başlık

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:

Başlık browserwindow konumlandırılmış

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.

sponsor alanlar veya bağlantılar

popüler yazılar

  • Android sunucu çöktü!
    Bu nasıl olduğu harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse
    + devamını oku

  • Android sunucu çöktü!
    Bu nasıl olduğu harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse
    + devamını oku

  • Android sunucu çöktü!
    Bu nasıl olduğu harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse harbiden bilinmemekle beraber kimse
    + devamını oku

hakkımda

istatistik

kopirayt

Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. aşamasında olan çok sayıda site listelenir. Yıllar içinde, bazen kazara, bazen bilinçli olarak (örneğin mizah katılarak)
Sitede toplam 36 yazı bulunmaktadır ayrıca 86 yorum ve 9 kategori bulunuyor bugün hava güneşli ama normal sayılır yani.
Sitemde yazılan , çizilen , eklenenlerin telif hakkı vs yoktur.Ç(alıntı) yapacaklarında kaynak göstermesi yeterlidir.Bakın dürüstüm size karşı "lütfen" çalmayın.

Çizen: Sefa Uygun
HTML/CSS: Tugay Tekeci - yapiyoruz.tr.gg
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol