Bağıl yerleştirin - bu nedir? ayrıntılı açıklaması

Yuvalama HTML - uzun bir süreç, titiz, ama çok yaratıcı. BT istihdam edilenlerin çoğunluğu için, web sayfaları düzeni sıkıcı rutin görünebilir olmasına rağmen, böyle bir durumda bir mesleğe sahip uzmanlar, sadece niteliksel görevi yürütmek değil, aynı zamanda somut zevk sürecinden alırlar.

Deneyimli bir kodlayıcı haline gelmeden Ancak, her yeni gelen çeşitli talimatlar ve hem HTML dilinin özelliklerine okuyan çok zaman harcıyor ve müttefikine - CSS. Tam Hakkında Ne CSS Bağıl Pozisyonu - - ne olduğunu ve ne "çalım kulakları" sen kalk sağlar, hem de üst özelliklerinden biri bugün konuşacağız.

CSS nedir?

CSS Kısaltma transkripsiyonu ve "biçembentlerde" olarak Rusçaya tercüme edilebilir. Oldukça garip sesler - bir tarafta, açıkça görünüyor ve sözler, diğer yanda - genel anlamı hemen çekilmemiş. tarzı ile - en basit başlayalım. Bu teknoloji sadece bir kez kayıt ve saatler sonsuz sayıda kullanabilirsiniz görünümü ile ilgili sayfadaki nesneleri belirli özelliklerle eklemesine olanak verir.

Kelime "listeleri" veya "listeleri" kullanmak olacaktır burada daha uygun aslında, ancak orijinal çeviri yazarları CSS listesinden başka benziyor karar verdi ve biz kimiz - resmi çeviride kelime "masa" kazara neredeyse göründü böyle bunları denemek için şimdi.

Son olarak, kelime "Cascade". Aslında, her eleman karışık ya da üst üste edilebilir çeşitli stilleri sahip olmasıdır. Pozisyon Mutlak - Bu gibi durumlarda, tarayıcı örneğin bir pozisyonu Bağıl özelliği vardır, bunlardan biri ile, birçok stili olduğu ortaya çıktı bloğun, görünümünü ve diğer oluşturmak amacıyla, bir dizi kurala başvurmak zorundadır. Aslında, bu tür çatışmalar tolere edilemez, ancak büyük projelerde bu tür karışıklık oldukça sık olur.

herşey adından açık olduğunda Şimdi, basit bir örnekle bakalım. en Siteniz belirli bir şekilde tasarlanmış düğmelerin çok sayıda olması gerektiğini varsayalım. Bunlar, boyut, gölge, opaklık, renk özelliklerine sahiptir. Tabii ki, her düğmeyi oluşturarak, bu parametreleri belirlemek, ancak CSS kullanmak çok daha kolaydır olabilir. Uygulamada, bunun yerine uzun listenin, daha sonra yukarıdaki özelliklerin tümünü değerlerini listeler belli bir sınıf tanımlamak ve gerek her düğmenin etiketi yalnızca sınıfın adını belirtmek gerekir, daha sonra tarayıcının kendisinin istenen renkte bu öğeleri renklendirmek ve onlara uygun bir verecektir "parlak".

Pozisyon özelliği nedir ki?

Şimdi bütün bu makaleye başlatıldığı uğruna, mülkiyet Pozisyon doğrudan geçin. Eğer İngilizce dil aşina, veya iyi bir sezgi varsa, o zaman zaten açık olmalıdır - bu özellik öğenin konumu sorumludur. Aslında, öyle, ancak bunun yerine belirli konumunu belirlemek yolu, bu özellik bitişik veya bir bütün olarak sayfa boyunca saygı ile onu tek yerleştirilmelidir nasıl tarayıcı veya başka bir öğe söyler.

Hangi değerleri Pozisyon mülkiyet can?

Birkaç farklı değerleri kabul edebilir Bizim mülkiyet, sadece beş tane var. Aşağıda her bir kısaca açıklanmıştır:

• Pozisyon devral. Bu özellik bir ebeveyn olan elemanın konumu üzerinde veri kopyalamak için izin verir. Eğer belirli bir pozisyonu Göreli ile bir div varsa Örneğin, sonra da Göreli olarak ayarlanır IMG devralır değeri ile onun içine girdi.
• Static yerleştirin. Artık belirtilmedikçe Bu değer, otomatik olarak tüm unsurları verilir. kodunda belirtilen ve "fırfırlar" çeşitli kullanılamadığından elemanları konumlarını değiştirmek için izin pozisyona uygun.
• Pozisyon Mutlak. Bu Değere göre pozisyonu özelliği oldukça sık bir "yüzen" unsuru oluşturmak için gerekli olduğu durumlarda kullanılır. mülkiyet öğesinin belirli bir değeri ile sayfanın diğer bileşenler için "görünmez" dir. Yani bizim mutlak eleman yok sanki düzenlenmiştir vardır. Kendisi bağımsız olarak her zaman uzak sayfasını kaydırıldığını nasıl yerinde olacaktır.
• Pozisyon düzeltildi. Mutlak eleman kendisinden önceki elemanların geri kalanını göz ardı kullandığı tarayıcı ekranın sol üst köşesinde sadece koordinatları sabit, ebeveyne bağlı iken Birçok yönden, bu değer, ancak, bir öncekine benzer.
• Son olarak, Bağıl yerleştirin. Bu tür değerler, ortak bir "kauçuk" olarak adlandırılan bu işaret, bir uyarlanabilir oluşturmak için yararlı olabilir, diğer pozisyonlama elemanı göre sağlar. Bu özellik sayesinde, öğe sayfasında konumlarını değiştirme yeteneği kaybetmeden diğer "itme" olacaktır.

farklı tarayıcılarda Pozisyon ile çalışma

Tüm tarayıcılar eşit uyumludur. Pozisyon değerini algılanan aksaklık olmadan internet sörf için en alternatif programlar kesinlikle doğru olmakla birlikte, "kronik özel» Internet Explorer, sürümüne göre, özelliği dikkate alır.

"Eşek" onlar sadece bunu görmezden - Örneğin, zaten "gömülü" tarayıcı IE6 kullanarak, size değer Sabit ve Devral'ı kullanamaz. Ancak, durumun yedinci versiyonu geliştirmeye başladı ve sevgili Devral'a, önceden işlenmiş Sabit rağmen "diğer tarayıcıları indirmek için tarayıcı," sadece sekizinci enkarnasyonunda ulaştı.

Gözlemcilerin kalanı sakince orta-90s yayınladığı 4 varyasyonları özelliklerinin desteğe sahip olduğu Opera hariç, ile, ilk versiyonu ile Konumunu işlemek.

JavaScript Pozisyon ile çalışma

Aslında, JavaScript pozisyonu özelliği ile çalışmak nasıl hikayesi, sadece terbiye uğruna dahil ettik almaktadır. div.style.position = 'göreli': Bu özellik başlığında özel karakterler olmadığı için, bir böyle bir çizgi içermelidir, Bağıl div Konumunu ayarlamak için, örneğin, herhangi bir değişiklik yapmadan JS kullanabilirsiniz.

Gördüğünüz gibi, oldukça basit.

Neden Pozisyon Bağıl yararları özel dikkat?

özellik değerleri Pozisyon çoğu, hafif, çevredeki unsurların "tüküren", değeri kullanarak "tarzı pozisyonunu: göreli" koymak için de, her zaman uygun olmayan kullanıma çünkü may şiddetle "çarpık" ekranında tüm içeriğini, bir bütün olarak tüm sayfa hakkında hatırlamalıyız .

Buna ek olarak, bu özellik yalnızca uygulama otomatik olarak tüm içerik sayfalarını etkileyecektir çünkü kolayca sabit tasarım adaptif dönüştürme sağlar. Sonra biz hala bu değeri kullanmaya ilişkin örneklere ve hataları dikkate almak zaman varsa ve pratikte onun somut önemini göreceksiniz.

Ne zaman göreceli konumlandırma kullanmalıyım?

sayfalar HTML geleneksel düzenin yanı sıra, pozisyonu Bağıl sıklıkla ilginç etkileri çeşitli oluşturmak için kullanılır. Bir öğeyi istiyorsanız Örneğin, tam tersine, giderek kendi topraklarında ötesine geçti, bir sayfada "geldi" veya bu tam da bu özellik bu "hile" uygulamak yardımcı olabilir.

Belirli bir değişkenin değerindeki iniş çıkışlar ayarlamasına izin CSS3 özellikleri içinden, ilerici empoze için amacı JavaScript aracılığıyla uygulanmaktadır Bu "hile" dir, ya da.

Buna ek olarak, olası bazı durumlarda "melez" değerlerini Pozisyon göreli oluşturun. Aynı zaman pozisyon gibi bir şey ayarlamanızı sağlar değil gerçi CSS:, ancak bazı hileler kullanılarak mutlak akrabası, etkiyi elde etmek mümkündür. Eğer böyle bir şey kompleksi oluşturmak için gereken yere Bu yaklaşım durumlarda yararlı olabilir bir araç ipucu veya açılır menüden. örnekler göz önüne alındığında, bu tür bir yapının bir açıklama verecek "hibrid".

göreceli sıralamasını kullanan örnekler

bu oldukça basit ama ilginç etkileri çeşitli uygulamak için izin verir esnek aracı - Bağıl yerleştirin. zaman israf ve gereksiz kod şablonu yazmak için yer vermemek için, biz Sitenize veya belirli sayfaları süslemek birkaç ağızdan algoritmalar sunuyoruz.

yönettiği "tükendi" hattı ile başlayalım. Eğer "seyahat" ekranın sol kenarından çünkü yavaş yavaş sağ tarafa hareket edecek bir öğe için bir ihtiyaç olduğunu varsayalım. pozisyon belirlesin böyle bir "mekanizma" uygulamak için: bağıl; Sol: -100px, burada -100 - blok genişliği oluşturan piksellerin yaklaşık sayısı. Bu stilde, "başlangıç pozisyonuna" yerleştirerek, ekranın dışına birimini gizlemek sağlayacaktır. Artık yeter ki tarayıcı penceresinin genişliğini eksi elemanın genişliğine eşit olmaz olarak birim özellik değerini sol her birkaç milisaniyede artacak bir komut dosyası kullanabilirsiniz. Sonuç ekran boyunca devirdi ve sağ elinde "park", sol kenarından çıkan bir birimdir.

Diğer bir örnek ise "göreli-mutlak" öğeleri oluşturmak için izin verir. Örneğin, konumu haiz, diğerinin içine mutlak girebilirsiniz. Sonuç olarak, biz mutlak yazılı olduğu üzere büyüklüğe sahip olmayan bir "göreli" blok var, artık önceki elemanın bağımsız bir konumda kendini gösterebilir edebiliyor.

Tipik hatalar Pozisyon Göreli kullanarak

Pozisyon Göreli kullanarak en yaygın hata birçok web tasarımcıları yerde bulunabilir biriminde bir yer ayrılacak yeteneği, unutmak olmasıdır. Ekranın ve göreceli konumlandırma sahip dışına yerleştirilmiş, oldukça büyük varsa Örneğin, onun yerine bir şaşkın "delik" olacaktır. Ancak, hatta bu özellik bazen birtakım rahatsızlıkların onun blokların hepsi yavaş yavaş üst pozisyonda yerleştirilir sitenin "kendini asamblajtnın" ilginç bir etkisi yaratarak, örneğin, iyi kullanılabilir oluşturur edilir: 0; Sol: 0; t., e., orijinal bir yer.