Bloğun farklı taraflarına yerleştirme elemanları. Blokları yatay olarak yerleştirme yolları CSS nesnesinin konumu

), listeler (

) ve diğer unsurlar.

Ve şimdi hakkında

Ah.

Yukarıda belirtildiği gibi herhangi bir HTML öğesinin konumunu ayarlayabilirsiniz. Bunun için her zaman etiketini kullanmaya gerek yoktur

. Ayrıca bu etiketin kullanılması, ona web sayfasında herhangi bir konum vermenizi zorunlu kılmaz.
Etiketle belirtilen bloğu kullanmanın anlamı
konsolidasyona gelir. Sonuçta içine başka öğeler de yerleştirebilirsiniz (paragraflar, resimler vb.). Bu, çeşitli içeriğe sahip büyük bir blok oluşturur; bu blok, bir web sayfasında her bir öğenin ayrı ayrı konumlandırılmasından çok daha kolaydır.
Elemanların konumlandırılması.
Dört ana konumlandırma türü vardır:
1. Statik
2. Mutlak
3. Sabit
4. Göreceli)
Statik
Varsayılan konum olarak kullanılır. Bu durumda tarayıcı HTML kodunu görüntüler, onu öğelere böler ve onlardan bir sayfa oluşturur. Sonuç, bir dizi öğenin dizisidir. Html kodunda belirtildikleri sıraya göre görüntülenirler.
Parametreleri uygulama sol, üst, sağ ve alt herhangi bir sonuca yol açmaz.
Göreceli konumlandırma kullanıldığında statik konumlandırma akılda tutulmalıdır.
Mutlak
Mutlak konumlandırma kullanılarak bloğun sol üst köşesinin koordinatları belirtilir. Bu durumda koordinatlar ana öğenin konumuna göre sayılır. Ana öğe bir tarayıcı penceresi ise blok ona göre hizalanır. Bloğun bulunduğu başka bir eleman varsa hizalama bu elemana göre gerçekleşir.
Sabit
Zaten isminden bu durumda elemanın sabit olduğu anlaşılıyor. Web sayfasında belirli bir yerde bulunur ve hiçbir yere taşınmaz. Bu hizalama genellikle açılır pencerelerin ortalandığı ve siz sayfayı kaydırırken hareket etmediği açılır pencereler için kullanılır.
Akraba
Bu tür konumlandırma zor olabilir. Adı tam olarak uygun değil. Birçok kişi öğelerin göreceli ve mutlak konumlarını karıştırır. Hizalamanın ana öğeye göre olduğu görünebilir. Ve mutlak konumlandırma durumunda - tarayıcı penceresine göre. Ama bu doğru değil.
Bu durumda elemanın konumunun statik konumdaki yerine göre gerçekleştiğini anlamak gerekir. Yukarıda bahsedilen budur.
Basitçe söylemek gerekirse, tarayıcıya bir öğeyi varsayılan olarak bulunduğu yere göre belirli sayıda piksel taşımasını söylersiniz.
Başka bir zor nokta daha var. Ana öğenin göreceli konumu varsa ancak iç içe geçmiş öğenin mutlak konumu varsa ne olur? Bu durumda, alt öğenin koordinatları, varsa ofseti dikkate alınarak ana öğeye göre hesaplanacaktır.
Özetleyin.
Yani bir mülk var konum. Bu özellik 4 değer alabilir Statik, Mutlak, Sabit ve Göreli. Varsayılan: Statik.
Bir öğenin koordinatlarını belirlediğinizde, tarayıcıya bu koordinatları nasıl hesaplaması gerektiğini de söylemeniz gerekir. Ona bir başlangıç ​​noktası vermemiz gerekiyor.
Mülk yoksa unutma konum koordinatlar dikkate alınmayacak, blok aynı yerde, statik konumunda kalacaktır.


Şimdi koordinatların nasıl ayarlandığını görelim.
Bu amaçlar için dört tür özellik kullanılır:
1. Üst
2 sol
3. Sağ
4. Alt
Tepe- pozitif bir değer (örneğin, 20 piksel) bloğu 20 piksel aşağı taşır. Negatif bir değer (-20 piksel), öğeyi 20 piksel yukarı taşır. Bütün bunlar sol üst köşeye göre gerçekleşir.
Sol- tabelaya bağlı olarak sola veya sağa kaydırın. Sol üst köşeye göre.
Sağ- tabelaya bağlı olarak sağa ve sola kaydırın. Sağ üst köşeye göre.
Alt- vites yükseltme veya azaltma, işarete bağlıdır. Sol alt köşeye göre oluşur.
İşte HTML kodu:







Ve bu CSS'dir:
#1 {
konum:göreceli;
üst:100 piksel;
sol:100 piksel;
genişlik:500 piksel;
yükseklik:500px;
arka plan rengi:#CCCCCC;
}
#11 {
arka plan rengi:#003399;
konum:mutlak;
alt: -30px;
sağ: -50 piksel;
genişlik:100 piksel;
yükseklik:100 piksel;
}
#2 {
arka plan rengi:#990066;
genişlik:200 piksel;
yükseklik:300 piksel
}
Pratik.
Yazarken kendim çözdüm.
HTML'deki bir blok öğesi, varsayılan olarak üst öğesinin tüm genişliğini kaplayan bir öğedir. Ana öğe başka bir blok öğesi veya bir tarayıcı penceresi olabilir. CSS özelliklerini kullanarak bir blok öğesinin genişliğini ve yüksekliğini ayarlayabilirsiniz. Blok öğelerini konumlandırma, bunları tarayıcı penceresi içinde ve CSS özellikleri pozisyon, sol, üst, sağ ve alt kullanılarak onlara göre konumlandırma işlemidir. CSS konum özelliği, mevcut dört konumlandırma türünden birini ayarlamak için tasarlanmıştır: statik (varsayılan), mutlak, sabit ve göreceli. Kalan CSS özellikleri, yani left, top, right ve Bottom, ana öğenin sol, üst, sağ ve alt kenarlarına göre mesafeleri ayarlamak için kullanılır. Ayrıca belirli özellikleri ayarlarken blok elemanları üst üste gelebilir ve bu özellik web sitelerinde de kullanılabilir.
Varsayılan konumlandırma (statik)
Bir blok elemanı için bir pozisyon belirtmediyseniz veya static olarak belirttiyseniz, ki bu aynı şeydir, o zaman blok elemanları sırayla düzenlenir. Ayrıca bir sonraki blok (örneğin: kırmızı) yeni bir satırda bulunur. Ayrıca bu konumlandırma sol, üst, sağ ve alt mesafelerin ayarlanmasından etkilenmez.



Mutlak konumlandırma (mutlak)
Mutlak konumlandırmada, bir öğenin konumu, left , top , right ve Bottom özellikleri tarafından belirtilen mesafeler kullanılarak tarayıcı penceresinin kenarlarına göre belirtilir. Sol ve sağ mesafeleri aynı anda belirtirseniz ve birbirleriyle çakışırlarsa, left tercih edilir; aynı şey üst mesafenin öncelikli olduğu üst ve alt için de geçerlidir. Mutlak konumlandırma, çeşitli öğeleri birbirine göre yerleştirmenin gerekli olduğu durumlarda, tasarım amacıyla sıklıkla göreceli konumlandırmayla birlikte kullanılır; ayrıca açılır menüler, site düzeni vb. oluşturmak için de kullanılabilir.




Sabit konumlandırma
Sabit konumlandırma diğer konumlandırma türlerinden farklıdır ve siz sayfayı kaydırdıkça içerikle birlikte hareket etmez. Sabit konumlu blok öğeleri, left , top , right ve Bottom özellikleri kullanılarak tarayıcı penceresinin kenarlarına sabitlenir. Sabit konumlandırma, çerçeve arayüzleri (tarayıcı penceresi birkaç alana bölünmüştür), sabit bir menü, sabit bir site altbilgisi ve "kalıcı" bloklar (bağlantıların listesi, sosyal düğmeler vb.) oluşturmak için kullanılır.




Göreli konumlandırma
Göreli konumlandırma, geçerli konumuna göre left , top , right ve Bottom mesafeleri belirtilerek belirtilir.




Ancak bu blok konumu, marj özelliği kullanılarak da oluşturulabilir.



Göreli konumlandırmanın tek başına kullanılması eğlenceli değildir; çoğunlukla mutlak konumlandırmayla birlikte kullanılır.
Seçenekleri ele alalım:


Css bloklarını konumlandırma Düzenin en önemli aşamalarından biri, çünkü bu, sitenin uyarlanabilirliğini veya gelecekte uygulanma olasılığını (şu anda gerekli değilse) etkileyen şeydir ve ayrıca sitenin daha fazla ölçeklendirilmesi üzerinde de önemli bir etkiye sahiptir. . "Düzen tasarımcılarının" öyle bir düzen yapması alışılmadık bir durum değil ki, sonunda onu atmak bir şeyi değiştirmekten daha kolaydır, ancak aynı zamanda düzene tamamen uygun görünebilir. Bu durum, şu veya bu tür konumlandırmanın nerede ve ne zaman kullanılacağının anlaşılmamasından kaynaklanmaktadır. Bugün bu konuyu anlamaya çalışacağız. Ve böylece, css'de bir özellik var konum. Bu özellik 5 değer alabilir ancak biz 4 ana değeri ele alacağız:
• mutlak
• statik
• akraba
• sabit
Blokların mutlak konumlandırılması (mutlak)
Listemizdeki ilk konumlandırma yöntemi mutlaktır. Bu özellik atanırken blok başlı başına bir birim haline gelir ve diğer sayfa elemanları onun konumunu etkilemediği gibi diğer elemanları da etkilemez. Blok boyutu genişlik ve yükseklik özelliklerine göre belirlenir ve sayfadaki konumu üst özelliklere göre belirlenir. sol, sağ ve alt bu parametreler üst, sol, sağ ve alt kenarlardan gelen dolguyu belirtir. Bloğun bir ana öğesi yoksa ve ayrıca ana öğenin konumu statik değilse, top, left, Bottom, right özellikleri girintileri sayfanın başından itibaren, aksi halde kenarlarından itibaren ayarlar. ana öğe.
Çoğu zaman bu tür konumlandırma, bloğun sağ veya alt kenara bastırılması gerektiğinde kullanılır. Bu düzeni ele alalım.
Kolaylık sağlamak için bloklar çok renkli bir çerçeveyle vurgulandı. İşaretleme şöyle görünecek:
XHTML
İlişki ( konum: göreceli; ) .yellow ( konum: mutlak; sağ: 10 piksel; alt: 10 piksel; )
İlişki konum: göreceli; Sarı konum: mutlak; sağ: 10 piksel; alt: 10 piksel;
Bu örnekte, sağ ve alt kenarlardan uzaklığı ayarlamak için sağ ve alt özelliklerini kullandık. Bu özellik değerleri top değerlerine eşdeğerdir: Eleman yüksekliği - 10 piksel ve sol: Eleman genişliği - 10 piksel.
Ayrıca mutlak konumlandırma bazen bir öğenin diğerine "etkilenmesi" gerektiğinde kullanılır.
Statik konumlandırma (statik)
Her sayfada meydana gelen ve genellikle çoğu öğe için ayarlanan en yaygın konumlandırma türü, css'de statik olarak yazılan statiktir. Çoğu HTML etiketi için bu değer varsayılan olarak tanımlanır; konum açıkça belirtilmemişse değer statik olacaktır. Bu düzenlemeyle, elemanlar birbirinin altında sıralanır ve her bir elemanın penceresindeki koordinatlar, pozisyon: statik veya pozisyon: göreceli olarak en yakın elemanlara bağlıdır. Bu konumlandırma ile üst, sol, sağ, alt özellikleri çalışmaz, kenar boşluğu özelliğinden dolayı konum değiştirilir.
Göreli konumlandırma
Bu tür konumlandırma, statik konumlandırmaya çok benzer; tek fark, öğenin konumunun top, left, right, Bottom ve kenar boşluğu özellikleriyle değiştirilebilmesidir.
Sabit konumlandırma
Sabit konumlandırma, koordinatların nasıl belirtildiği açısından mutlak konumlandırmaya benzer, ancak konum, HTML sayfasına göre değil, tarayıcı penceresine göre hesaplanır; top: 10px özelliği ile üst kenar boşluğunu 10px olarak ayarlayacaksınız TARAYICI PENCERESİNDEN ve sayfa kaydırmanın hangi düzeyinde olursanız olun, bu öğe her zaman ekranınızı takip edecektir.
Tipik olarak gezinme öğeleri için kullanılır, böylece kullanıcının her zaman önemli bilgilere veya ilgi çekici sayfalara giden bağlantılara sahip olması sağlanır.
CSS ile ilgili en iyi şeylerden biri, stillerin bize içeriği ve öğeleri bir sayfa üzerinde akla gelebilecek hemen hemen her şekilde konumlandırma yeteneği vermesidir. Bu, tasarımımıza yapı katar ve içeriğin daha görsel olmasına yardımcı olur.
CSS'de birkaç farklı konumlandırma türü vardır ve bu türlerin her birinin kendi kapsamı vardır. Bu bölümde birkaç farklı kullanım örneğine bakacağız (yeniden kullanılabilir düzenler oluşturma ve tek kullanımlık öğeleri benzersiz şekilde konumlandırma) ve bunu yapmak için birkaç yöntem açıklayacağız.
Şamandıra aracılığıyla konumlandırma
Öğeleri bir sayfada konumlandırmanın bir yolu, float özelliğini kullanmaktır. Bu özellik oldukça çok yönlüdür ve birçok farklı şekilde kullanılabilir.
Temel olarak, float özelliği bir öğeyi alır, onu sayfanın normal akışından çıkarır ve onu ana öğesinin soluna veya sağına konumlandırır. Sayfadaki diğer tüm öğeler böyle bir öğenin etrafına sarılacaktır. Örneğin, öğe şu durumda paragraflar bir görüntünün çevresine sarılır: float özelliği ayarlandı.
Float özelliği aynı anda birden fazla öğeye uygulandığında, çok sütunlu düzende gösterildiği gibi, kayan öğelerin yan yana veya karşılıklı olduğu bir düzen oluşturulmasını mümkün kılar.
Float özelliği birkaç değer alır; en popüler ikisi sol ve sağdır; bunlar, öğenin ebeveyninin soluna veya sağına doğru kaymasına olanak tanır.
resim ( kayan nokta: sol; )
pratikte yüzer
Üstte bir başlık, ortada iki sütun ve altta bir altbilgi bulunan genel bir sayfa düzeni oluşturalım. İdeal olarak bu sayfa öğelerle işaretlenmelidir
,
,