Merhaba, blog sitesinin sevgili okuyucuları. Bugün ilkeler hakkında konuşacağız. konumlandırma HTML öğeleriİle CSS kullanma Konum kuralları (mutlak, göreli ve sabit değerlerle) ve sol, sağ, üst ve alt uzaklıkları belirten özellikler. Sol alt köşedeki yıldızı görüyor musun? Makaleyi sonuna kadar okuduktan sonra oraya nasıl geldiğini öğreneceksiniz.

Geçen makalede birbirini takip eden ilişkilerin normal akışını bozmaya yardımcı olan temellerden birinden bahsetmiştik. HTML Kodu Etiketler. Artık inşaatın esas olarak dayandığı siteyi uygulamanıza olanak tanır. Ama tek başına Float değil...

Göreceli konum - göreli konumlandırma

Tabloları kullanarak etiketleri konumlandırmaktan sorumlu olan Konum da vardır. basamaklı stiller ve aynı zamanda izin verir normal akışı kırmak. Anlamak açısından, bu kural daha önce tartışılan kayan noktalardan biraz daha karmaşık olacaktır, ancak sanırım bunu halledebiliriz.

Dört olası değeri vardır (statik | göreceli | mutlak | sabit). Bunu nasıl bilebiliriz? Tabii ki, resmi web sitesinde yayınlanan spesifikasyona göre:

Varsayılan değer: konum: statik. Onlar. normal akışta iki CSS kuralları, onu kırabilen, varsayılan static ve float:none değerlerine sahiptir. Bu değerlerden biri değiştiği anda HTML kodunun buradaki normal akışı bozulacaktır çünkü artık bu etiket komşularıyla tamamen farklı bir şekilde etkileşime girebilecek, hatta hiç etkileşime girmeyebilir.

Değere karşılık gelecek göreceli konumlandırmayla başlayalım pozisyon: göreceli. Bunu bir etikete kaydettikten sonra, ek kullanarak bu elemanın ofsetini (konumunu) ayarlayabileceğiz. kurallar Sol, sağ, üst ve alt(sırasıyla sol, sağ, yukarı ve aşağı):

Dördü için de varsayılan Otomatik'tir. Bir etiket için konum: göreli kuralını belirttiğimizde, tüm kenarlardaki girinti değerleri sıfırlanır ve size bunları kendiniz ayarlama fırsatı verilir.

Anlamak gerekiyor girintiler nasıl ayarlanır. Örneğin, left: 400px sol taraftan sağa doğru karşılık gelen miktarda girinti anlamına gelir ve top: 100px yukarıdan aşağıya doğru anlamına gelir. Sol, sağ, üst ve alt için negatif değerler belirlerseniz öğe ters yönde hareket eder (örneğin, üst üste, Sol sola).

Kayan bir öğe üzerinde göreceli kullanımına bakalım. Kullanarak netlik sağlamak için farklı arka plan renkleriyle renklendireceğimiz iki Div kabımız olsun.

Başlangıçta ilgili özelliği kullanarak ilk konteynerin sola doğru yüzmesini sağlayacağız ve o zamandan beri boş olacak, sonra onu vereceğiz (ve kenar boşluğunu kullanarak girinti):

Sonuç olarak, bu yağlı boya tabloya benzer bir şey elde edeceğiz:

Beklendiği gibi ilk konteyner sola doğru yüzüyor. Aynı zamanda, ikinci bloğun kendisi bunu fark etmiyor gibi görünüyor (çünkü), ancak fark ediyor satır içi öğe kayan bloğumuzun etrafını saran metin.

Şimdi şunu ekleyelim CSS kuralları ilk kapsayıcı konumu için: göreceli ve Sol ve üst öğesini kullanarak sol ve üst kenar boşluklarını ayarlayın:

Sonuç olarak, kayan öğemizin belirtilen kenar boşluklarına göre hareket ettiğini göreceğiz:

Metnin sanki hala yerinde duruyormuş gibi onun etrafında akmaya devam ettiğine dikkat edin. Onlar. Birçok Html etiketi oluştururken (kurallarda belirlediğimiz Sol ve Yukarı kaydırmaları hesaba katmadan) hak ettikleri yerde olduklarını düşünürler.

Ancak tüm etiketler bunu yapmaz, aksi takdirde herhangi bir değişiklik göremeyiz. Parşömen kullanan en yakın ata(bizim durumumuzda bu Html etiketi yani aslında görüntüleme alanı olacaktır) bu değişiklikler fark edilecektir.

Göreceli çalışma prensibi karmaşık değildir, ancak pratikte neden kullanılabileceği tam olarak açık değildir. Aslında bu kural kullanılıyor mutlak konumla birlikte ve bu haliyle çok geniş bir uygulama alanı bulur. Ama önce ilk şeyler.

Mutlak konum - CSS'de mutlak konumlandırma

Mutlak konumlandırmaya bakmaya devam edelim. Bu CSS kuralına bakmaya başlamanın en kolay yolu açıklayıcı bir örnektir. Div konteynerinin içinde mutlak konumlandırmayı ayarlayacağımız bir satır içi Span etiketimiz olduğunu varsayalım.

Ama önce “pozisyon: mutlak” eklemeden bu yapıya bakalım. Aynı zamanda Span'ın çizgisini vurgulamak için ona zaten uygulanmayacak bir yükseklik ekleyeceğiz ve bu sefer Head yapısı aracılığıyla değil, değişiklik için CSS kodunu ekleyeceğiz:

<stil türü="text/css"> #abs( arka plan:#FFC0C0; kenar boşluğu: 100 piksel; ) #abs span( arka plan:#C0FFC0; yükseklik:100 piksel; )

Div için sol kenar boşluğunu da 100 piksel olarak ayarladık. Peki şimdi Span satırı etiketimize mutlak konumlandırmayı şunu ekleyerek verirsek ne değişecek bakalım: CSS konumu mutlak kuralları:

#abs yayılma( arka plan:#C0FFC0; yükseklik:100 piksel; konum:mutlak; )>

Garip bir şey oldu. Height:100px özelliğinin Span'a uygulandığı gerçeğine bakılırsa bu, satır içi etiket olmaktan çıkmıştır. Daha sonra, açıkçası, "birinci" ve "üçüncü" parçaları, sanki "ikinci" kelimesinin bulunduğu öğe artık aralarında yokmuş gibi birleştirildi. CSS'de mutlak konumlandırma tam olarak bu şekilde çalışır.

Ancak bir öğeye özellik ayarlarken her şeye nokta nokta bakalım "konum: mutlak":

1. Bu kuralın belirtildiği etiket bir blok etiketi haline gelir
2. Bu bloğun boyutları içerdiği içeriğe göre belirlenecektir (genişlik ve yüksekliği kullanarak açıkça belirtmediğiniz sürece).

Tıpkı kayan öğelerde olduğu gibi (Float belirtilmiş halde), etikete "position: mutlak" uygulanırsa, bu tür etiketler için Margin-colloapse efekti görünmeyecektir. Onlar. Hiç kimse dikey girintilerini kendisine aktaramayacak ve o da kimseye aktaramayacaktır (dikey girintileri kimseyle paylaşmaz).

Bir önceki yazımızı “” kısmından hatırlarsanız Float kullanarak yüzen elemanlar oluştururken bu üç noktanın da dikkate alındığını göreceksiniz.

Bu nedenle, Float zaten bir etiket için ayarlanmışsa, ancak bunun için "pozisyon: mutlak" belirtildiyse, ilki tarayıcı tarafından (kodun ayrıştırılmasından sorumludur) Yok'a (varsayılan değer) sıfırlanır, çünkü iki özdeş modeli uygulamanın hiçbir anlamı yok.

3. "position:mutlak" belirtilen bir etiket, hemen kaydırılabilir üst öğesi dışında başka hiçbir Html kod öğesiyle etkileşime girmez. Koddaki diğer tüm etiketler şu öğeye sahiptir: mutlak konumlandırma sadece fark etmiyorlar (ve bu bizim örneğimizde açıkça görülüyor)

Bunların hepsi iyi ama “mutlak”ın yardımıyla mutlak konumlandırma yapmalıyız. Aslında bu aslında doğru. Bununla birlikte aynı dört CSS kuralını kullanabiliriz: Sol, sağ, üst ve alt. Mutlak konumlandırmayla nasıl çalışacaklar?

Yine de bir uzaklık ayarlayacaklar, ancak uzaklık artık öğenin mevcut konumuna göre değil, kapsayıcısının sınırlarına göredir.

Ve konseptin kendisi mutlak konumlandırılmış elemanlar için konteyner genel kabul görmüş olandan farklı olacaktır. Önceki makalelerden muhtemelen bir konteynerin Html etiketi görünüm alanıdır ve diğerleri için ebeveynin içerik alanıdır. Mutlak konumu belirtilen bir etiket için bu durum geçerli olmayacaktır.

Mutlak konumlandırma ile konteyneri kendimiz atayabileceğiz (bu, sahip olan ataların ilki olacak) konum değeri statikten farklı, varsayılan olarak kullanılır).

Diyelim ki yalnızca mutlak konumlandırmayı belirlediysek ancak Sol, sağ, üst ve alt kurallar için herhangi bir değer belirtmediysek, o zaman onlar için varsayılan Otomatik değeri kullanılacak ve böyle bir öğe yerinde kalacaktır (olduğu gibi) son ekran görüntümüz). Burada her şey açık olmalı.

CSS, daha önce makalemde ayrıntılı olarak yazdığım ata-çocuk yapısını kullanır. Mutlak konumlandırılmış bir etiket için bir kapsayıcı tanımlarken görevimiz, statik dışında bir değere sahip (yani açıkça belirtildiğinde) bir konuma sahip bir ata bulmak olacaktır.

Örneğimizde atalardan hiçbiri Yayılma etiketi Konumu belirtmedik o yüzden en üste (Html ​​etiketi) ulaştığımızda orada duracağız. Yukarıda tartışılan örnek için sıfır dolguyu ayarlayalım ve haklı olduğumuzdan emin olalım:

#abs yayılma( arka plan:#C0FFC0; yükseklik:100 piksel; konum:mutlak; sol:0; üst:0; )>

Sonuç olarak, mutlak konumlandırılmış etiket, görünümün sıfır referans noktasına doğru bastırıldı. Ama biz kendimiz özgürüz belirtilen mutlak konuma sahip bir öğe için bir kap seçin. Bu nasıl yapılabilir?

Div düzeninde mutlak ve göreceli konumun birleşimi

Peki bunun için neden CSS kuralını “position:relative” olarak kullanmıyorsunuz? Haydi onu kayıt edelim gerekli etiket ata (sonunda mutlak olarak konumlandırılmış bir öğe için bir kapsayıcı haline gelecektir) ve Sol, sağ, üst veya alt değerlerini belirtmeyecek, dolayısıyla bu atanın konumunda hiçbir değişiklik yapmayacaktır (o normal akışta kalacaktır), ancak kapsayıcı ve raporun başlangıcı mutlak konumlandırmamız için.

Eğer "göreceli" yazarsak Gövde etiketi, o zaman resmimiz biraz değişecek:

Görüyorsunuz, Body etiketinin sol üst köşesinin artık başlangıç ​​noktası olarak alındığını gösteren karakteristik girintiler ortaya çıktı. Bu etiketin varsayılan değerlerinin şöyle olduğunu unutmayın: kenar boşluğu girintileri 8 pikselde gözlemlediğimiz şey şu:

Şimdi, daha önce yaptıklarımıza ek olarak, içinde Span etiketinin bulunduğu Div konteyneri için "position:relative" yazalım:

Gördüğümüz kadarıyla tablo değişti. Göreliliğin hem Body hem de Div için belirtilmesine rağmen Div, mutlak konumlandırılmış Span için kapsayıcı haline geldi çünkü o ilk ata, konum değeri statik dışında olan.

Üstelik Div'imiz için de yazarsak, mevcut iç dolgulu içerik alanının mutlak konumlandırma için konteyner olarak kullanılacağını göreceğiz:

#abs( arka plan:#FFC0C0; sol kenar boşluğu: 100 piksel; konum: göreceli; kenarlık: 12 piksel noktalı #ccf; dolgu: 20 piksel; )

Örnekte görülebileceği gibi referans noktası solda yer almaktadır. üst köşe eleman çerçevesinin içinde (iç kenarlığı boyunca). Dolayısıyla kural şu ​​şekildedir: "position:relative" (mutlak konumlandırmaya sahip kapsayıcılar) içeren etiketler için, aşırılıkları önlemek amacıyla hiç çerçeve kullanmamak daha iyi olacaktır.

Girintiler (ofset) Sol, sağ, üst ve alt yalnızca mutlak birimler(hakkında okuyun), ancak aynı zamanda elde edilen kabın genişliğinden (sol ve sağ) ve yüksekliğinden (üst ve alt) alınacak bir yüzde olarak da. Onlar. "top:100%" konteynerin yüksekliğinin %100'üne, "left:100%" ise genişliğinin %100'üne karşılık gelecektir.

Ve yukarıda anlatılan etkileşimden bahsederken aklımda olan şey buydu. mutlak ve göreceli konumun kombinasyonu. Bu sayede konteyneri, yani mutlak konumlandırmanın başlangıç ​​noktasını kendimiz seçme olanağına sahip oluyoruz. Bu bağlantı neden pratikte kullanılıyor?

Örneğin, tam boyutlu bir fotoğrafı görüntülemek için Litebox adı verilen şeye benzer bir görevi uygulamak için bu prensibi kullanabilirler.

Onlar. sayfada ihtiyacınız varsa bir elementin görünümünü ve saklanmasını oluşturur göründüğünde diğer tüm etiketleri etkilemeyecektir (onlarla etkileşime girmeyecektir). Bu durumda, kesinlikle konumlandırılmış bir bloğun ortaya çıkması, tüm web sayfasının sarsılmasını ve yeniden yapılandırılmasını gerektirmeyecektir.

Açılır menü için aşağıdakine benzer bir şey yapın. Fare imlecini (CSS'de ile ayarlanmıştır) kök menü öğesinin üzerine getirdiğinizde, kesinlikle "mutlak" olarak konumlandırılmış bir öğe görünür (iç içe menü öğeleri temel alınarak oluşturulur). Bu açılır liste, kök menü öğesinin yanında, konum: göreli öğesinin belirtilmesinin basit bir nedeni nedeniyle görünür. Tüm.

Konum sabit - görünüm alanına yapış

Son konumlandırma yöntemi "pozisyon: sabit". Daha önce tartışılan yöntemler herhangi bir Html kod öğesine göre yerleştirilecek şekilde tasarlanmıştır. Ancak sayfayı kaydırmaya başlarsak, etiketleri (mutlak veya göreceli konumlandırmaya sahip olanlar bile) yukarı (veya aşağı) hareket eder.

Ancak sabit kullanıldığında bu artık gerçekleşmeyecek. Bu şekilde konumlandırılan bir öğe, web sayfasının kaydırılmasına bakılmaksızın görünüm alanında her zaman aynı konumda olacaktır. Muhtemelen web sitelerinde bu tür seçeneklerle karşılaşmışsınızdır. Örneğin, WordPress için oldukça popüler bir eklenti olarak adlandırılan .

Position:fixed olarak belirtilen bir etiket için hiç kimse bir kapsayıcı aramıyor çünkü bu, görünümün kendisidir. Bu tam olarak "mutlak"tan farktır ve geri kalan her şey aynıdır. Sabit yerleşimli bloklar, siz sayfayı kaydırırken tarayıcı pencerenizin arayüzünün öğeleriymiş gibi davranır (her zaman elinizin altındadır).

Bu şekilde, örneğin araç çubukları, geri bildirim bırakma özelliğine sahip açılır paneller vb. uygulanır. şeyler. Bu sayfada örnek olarak Konumu ayarladım: küçük bir resim için sabitlendi ekranınızın sol alt köşesinde (görüntü alanı):

Bugünlük bu kadar, bir sonraki makalede yalnızca halihazırda konumlandırılmış kod öğelerine uygulanabilecek olandan bahsedeceğiz. bunun için sabit, göreceli veya mutlak belirtilir.

Sana iyi şanslar! Yakında blog sitesinin sayfalarında görüşmek üzere

adresine giderek daha fazla video izleyebilirsiniz.

");">

İlgini çekebilir

Fare imlecini değiştirmek için Z-endeksi ve CSS İmleç kuralını kullanarak konumlandırma
CSS'de kayan ve temizleyin - blok düzeni araçları
Liste biçimi(tür, resim, konum) - Özelleştirme için Css kuralları dış görünüş HTML kodundaki listeler
CSS'de görüntüle (blok, yok, satır içi) - web sayfasındaki Html öğelerinin görüntülenme türünü ayarlayın
Neden CSS'ye ihtiyacınız var, nasıl bağlanacaksınız? basamaklı tablolar Bir Html belgesinin stilleri ve bu dilin temel sözdizimi

Konumlandırma en önemli kavramlardan biridir. blok düzeni. Bunu anladığınızda pek çok şey sizin için netleşecek ve düzen, şamanizmden anlamlı bir sürece dönüşecektir. Bu nedenle bu makale CSS özelliklerine odaklanacaktır. konum Ve batmadan yüzmek.

1. konum: statik

Varsayılan olarak, sayfadaki tüm öğelerin statik konumlandırması vardır (konum: statik); bu, öğenin konumlandırılmadığı ve belgede her zamanki yerinde, yani html işaretlemesiyle aynı sırada göründüğü anlamına gelir.

Önceden ayarlanan konumlandırmayı varsayılana değiştirmeniz gerekmediği sürece, bu özelliği herhangi bir öğeye özel olarak atamanıza gerek yoktur.

#içerik( konum: statik; )

2.pozisyon:göreceli

Göreli konumlandırma (konum: göreceli), bir öğeyi normal şekilde yerleştirildiğinde görüneceği yere göre konumlandırmak için üst, alt, sol ve sağ özelliklerini kullanmanıza olanak tanır.

#content'i 20 piksel aşağı ve 40 piksel sola taşıyalım:

#içerik( konum: göreceli; üst: 20 piksel; sol: -40 piksel; )

Lütfen #content bloğumuzun bulunması gereken yerde artık bir yer olduğunu unutmayın. Boş alan. #content bloğunun ardından, #footer bloğu aşağı taşınmadı çünkü #content, taşımış olmamıza rağmen hala belgedeki yerini koruyor.

Açık bu aşamada Göreceli konumlandırmanın o kadar da yararlı olmadığı görünebilir, ancak aceleyle sonuca varmayın; makalenin ilerleyen kısımlarında bunun ne için kullanılabileceğini öğreneceksiniz.

3. konum: mutlak

Mutlak konumlandırma (konum: mutlak) ile öğe belgeden kaldırılır ve söylediğiniz yerde görünür.

Örneğin #div-1a bloğunu sayfanın sağ üst köşesine taşıyalım:

#div-1a ( konum:mutlak; üst:0; sağ:0; genişlik:200px; )

Bu sefer #div-1a bloğu belgeden kaldırıldığı için sayfada kalan öğelerin farklı konumlandırıldığına dikkat edin: #div-1b, #div-1c ve #footer kaldırılan bloğun yerine yukarıya taşındı . Ve #div-1a bloğunun kendisi tam olarak sayfanın sağ üst köşesinde bulunur.

Bu şekilde herhangi bir öğeyi sayfaya göre konumlandırabiliriz ancak bu yeterli değildir. Aslında #div-1a'yı ana #content bloğuna göre konumlandırmamız gerekiyor. İşte bu noktada göreli konumlandırma yeniden devreye giriyor.

4. konum: sabit

Sabit konumlandırma (konum: sabit), mutlak konumlandırmanın bir alt bölümüdür. Tek farkı her zaman ekranın görünür alanında olması ve sayfayı kaydırırken hareket etmemesidir. Bu bakımdan biraz sabit bir arka plan görüntüsüne benzer.

#div-1a ( konum:sabit; üst:0; sağ:0; genişlik:200px; )

IE'de konum: sabit, her şey istediğimiz kadar düzgün değil, ama var çok şekilde bu kısıtlamaları atlayın.

5. konum:göreceli + konum:mutlak

#content bloğuna göreceli bir konum atayarak (pozisyon: göreceli), herhangi bir alt öğeyi sınırlarına göre konumlandırabiliriz. #content bloğunun sağ üst köşesine #div-1a bloğu yerleştirelim.

#content ( konum:göreceli; ) #div-1a ( konum:mutlak; üst:0; sağ:0; genişlik:200 piksel; )

6. İki sütun

Önceki adımlardan elde edilen bilgilerle donanmış olarak, göreceli ve mutlak konumlandırmayı kullanarak iki sütun oluşturmayı deneyebilirsiniz.

#content ( konum:göreceli; ) #div-1a ( konum:mutlak; üst:0; sağ:0; genişlik:200 piksel; ) #div-1b ( konum:mutlak; üst:0; sol:0; genişlik:200 piksel )

Mutlak konumlandırmanın avantajlarından biri, işaretlemede nasıl konumlandıklarına bakılmaksızın öğeleri herhangi bir sıraya yerleştirebilme yeteneğidir. Yukarıdaki örnekte #div-1b bloğu #div-1a bloğunun önüne yerleştirilmiştir.

Şimdi şu soruyu sormalısınız: "Örneğimizdeki diğer unsurlar nereye gitti?" Mükemmel yerleştirilmiş blokların altına saklandılar. Neyse ki bunu düzeltmenin bir yolu var.

7. Sabit yükseklikte iki sütun

Bir çözüm, sütunları içeren kaba sabit bir yükseklik vermektir.

#content ( konum:göreceli; yükseklik: 450 piksel; ) #div-1a ( konum:mutlak; üst:0; sağ:0; genişlik:200 piksel; ) #div-1b ( konum:mutlak; üst:0; sol:0 ;genişlik:200 piksel;

Sütunlarda metnin hangi boyutta yer alacağını, hangi yazı tipinin kullanılacağını asla önceden bilemeyeceğimiz için çözüm pek uygun değil.

8. Şamandıra

olan hoparlörler için değişken yükseklik, mutlak konumlandırma uygun değil, o yüzden başka bir seçeneğe bakalım.

Bloğa bir kayan nokta atayarak onu olabildiğince sağ (veya sol) kenara doğru itiyoruz ve bloğu takip eden metin onun etrafında akacak. Bu teknik genellikle resimler için kullanılır, ancak elimizdeki tek araç olduğundan onu daha karmaşık bir görev için kullanacağız.

#div-1a ( kayan nokta:sol; genişlik:200px; )

9. “Yüzen” hoparlörler

İlk bloğa float: left ve ardından ikinciye float: left atarsak, her blok sol kenara itilecek ve yüksekliği değişken iki sütun elde edeceğiz.

#div-1a ( kayan nokta:sol; genişlik:150 piksel; ) #div-1b ( kayan nokta:sol; genişlik:150 piksel; )

Ayrıca sütunlara ters kayan değer atayabilirsiniz; bu durumda bunlar kabın kenarları boyunca dağıtılacaktır.

#div-1a ( kayan nokta:sağ; genişlik:150 piksel; ) #div-1b ( kayan nokta:sol; genişlik:150 piksel; )

Ancak şimdi başka bir sorunumuz var; sütunlar ana kapsayıcının ötesine uzanıyor ve böylece tüm düzen bozuluyor. Bu, oldukça basit bir şekilde çözülebilmesine rağmen, yeni başlayan düzen tasarımcıları için en yaygın sorundur.

10. Temizleme şamandırası

Şamandıraların temizliği iki şekilde yapılabilir. Eğer sonra konuşmacılar geliyor bir blok daha, sadece net olarak atayın: her ikisi de.

#div-1a ( float:left; width:190px; ) #div-1b ( float:left; width:190px; ) #div-1c ( clear:both; )

Veya overflow: Hidden özelliğini ana konteynere atayın

#içerik ( taşma:gizli; )

Her durumda sonuç aynı olacaktır.

Çözüm

Bugün yalnızca temel konumlandırma teknikleri dikkate alındı ​​ve en çok basit örnekler. Ayrıca, yeni başlayan tasarım tasarımcılarına yardımcı olmak için her zaman Ivan Sagalayev'in bir zamanlar bana çok yardımcı olan bir dizi makalesini öneririm.

Tanım

Bir öğenin tarayıcı penceresine veya web sayfasındaki diğer nesnelere göre nasıl konumlandırılacağını ayarlar.

Sözdizimi

pozisyon: mutlak | sabit | akraba | statik | miras almak

Değerler

mutlak Öğenin kesinlikle konumlandırıldığını belirtir ve diğer öğelerin web sayfasında öğe tam olarak konumlandırılmamış gibi görünmesine neden olur. Bir öğenin konumu left , top , right ve Bottom özellikleriyle belirtilir ve konum aynı zamanda üst öğenin konum özelliğinin değerinden de etkilenir. Dolayısıyla, ebeveynin konum değeri statik olarak ayarlanmışsa veya ebeveyn yoksa koordinatlar tarayıcı penceresinin kenarından sayılır. Ebeveynin konum değeri sabit, göreli veya mutlak ise koordinatlar üst öğenin kenarından itibaren sayılır. sabit Eyleminde bu değer mutlak değerine yakındır ancak ondan farklı olarak ekranda left, top, right ve Bottom özellikleriyle belirtilen noktaya bağlanır ve web sayfasını kaydırırken konumunu değiştirmez. Firefox tarayıcısı hiç görüntülenmiyor kaydırma çubukları, öğenin konumu sabit olarak ayarlanmışsa ve tarayıcı penceresine tam olarak sığmıyorsa. İÇİNDE Opera tarayıcısı Kaydırma çubukları gösterilse de, öğenin konumunu hiçbir şekilde etkilemezler. göreceli Elemanın konumu orijinal konumuna göre ayarlanır. left , top , right ve Bottom özelliklerinin eklenmesi öğenin konumunu değiştirir ve orijinal konumundan bir tarafa veya başka bir tarafa taşır. statik Öğeler her zamanki gibi işlenir. left , top , right ve Bottom özelliklerinin kullanılması herhangi bir sonuç doğurmaz. inherit Ebeveynin değerini devralır.

HTML5 CSS2.1 IE Cr Op Sa Fx

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 1.

Pirinç. 1. konum özelliğini kullanma

Nesne Modeli

document.getElementById("elementID ").style.position

Tarayıcılar

Tarayıcı İnternet Explorer 6 sabit değeri desteklemez. Sürüm 8.0'dan önceki Internet Explorer, devralınan değeri desteklemez.

Konum özelliği tüm öğeler için geçerlidir ve beş olası değerden birine sahip olabilir:

• statik
• akraba
• mutlak
• sabit
• miras almak

konum:statik

9. bölümden:

Bu blok normal akışa göre konumlandırılmış normal bir bloktur. "Top", "right", "bottom" ve "left" özellikleri uygulanmaz.

bu örnek:

• İkinci blok, konum tanımı olmadan görüntüleneceği yerde görüntülenir
• Top için belirtilen değerler kullanılmaz, çünkü "statik" olan bloklar için tüm ofsetlerin değeri her zaman "otomatik" olur

Hatırlanacak şeyler:

• Bir öğenin konum özelliği static ise öğe konumlandırılamaz.
• Statik varsayılan değer olduğundan, başka bir blok konumlandırma değerini geçersiz kılmadığı sürece bu değeri belirtmeye gerek yoktur.

konum:göreceli

Bölüm 9'dan Görsel Biçimlendirme Modeli:

Bloğun konumu normal akışa göre hesaplanır (buna normal akışta konumlandırma denir). Blok daha sonra kendisine göre hareket eder. normal konum. Bir bloğu konumlandırmak için göreceli konumlandırma modeli kullanıldığında, bir sonraki bloğun konumu, sanki ilk blok normal konumundan ayrılmamış gibi hesaplanır.

Bu örnekte dikkat edilmesi gerekenler:

• "İki" blok 300 piksel aşağıya kaydırılır, ancak "üç" blok ve içeriği yerinde kalır. İkinci bloğun içeriği izlerini bırakarak sayfanın dışına taşınmış gibi görünüyor. Konumlandırmanın "göreceli" olması nedeniyle böyle görünüyor normal akışı bozmaz.
• Şununla engelle: göreceli konumlandırma aşağıdaki öğelerle örtüşür ve diğer bloklardan önce görünür.

Hatırlanacak şeyler:

• Hesaplanan değerler her zaman sol = -sağ ve üst = -alt şeklindedir. Blok konteynerinin yön değeri ltr ise "left" değeri kullanılır ve "right" = -left. Blok konteynerinin yönü rtl'ye eşitse "right" değeri kullanılır ve "left" göz ardı edilir.
• "Mutlak" modelin aksine, top , right , Bottom ve left özellikleri bloğu uzatamaz veya küçültemez ve boyutunu etkileyemez.

konum:mutlak

Bölüm 9'dan Görsel Biçimlendirme Modeli:

Bloğun konumu (muhtemelen boyutu) "top", "right", "bottom" ve "left" özellikleri kullanılarak belirtilir. İçeren bloğa göre bir ofseti belirtirler. Mutlak konumlandırılmış bloklar normal akıştan çıkarılır ve yerleşimi etkilemez aşağıdaki unsurlar akış. Mutlak konumlandırılmış blokların alanlarının başka herhangi bir alanla örtüşmediğine dikkat edilmelidir.

Bu örnekte dikkat edilmesi gerekenler:

• Ofsetin belirtilmemesi nedeniyle "iki" bloğu normal konumuna göre hareket etmez, ancak örneğin şunu kullanırsak: top:0;left:0; blok, görünümün sol üst köşesinde olacaktır.
• Düzen sanki "iki" bloğu stillendirilmiş gibi görünüyor: display:none . Blok akıştan kaldırıldı.
• "İkinci" blok akıştan kaldırıldığında, "üç" blok "bir" bloktan sonra taşındı (paragraflar onu takip etti).
• Akıştan kaldırılan tüm öğeler gibi ikinci blok da yatay olarak sıkıştırıldı.

Hatırlanacak şeyler:

• İçin herhangi"mutlak" veya "sabit" konumlu öğede hesaplanan değer display:block'tur.
• "İçeren blok", bağlamın konumunu tanımlayan bir bloktur. "Konum"un "mutlak", "göreceli" veya "sabit" olarak ayarlanmasıyla en yakın ataya ayarlanır. Bu demektir ebeveyn bloğu olmayabilir içeren blok.
• Kesinlikle konumlandırılmış bir bloğun varsayılan konumu her zaman üst:0;sol:0; (LTR bağlamında), bunun iki nedeni vardır:

1. İçeren blokta bloğun konumu belirlenir en yakın ataların konumlandırılması, eğer yoksa, belirtilen kapsayıcı kök öğedir. Kök elemanın bulunduğu içeren blok, ilk içeren blok adı verilen dikdörtgen bir alandır. Sayfalandırması olmayan cihazlarda, görünüm alanının (pencere veya ekrandaki diğer görüntüleme alanı) boyutudur ve sayfaya eklenir. Bu örnek, görünür alana göre konumlandırılmış bir bloğu gösterir (varsayılan olarak bloğu içerir).
2. Öğe, blok girintilerine göre konumlandırılır ve bloğun içeriği ya da içeren bloğun sınırı değil. Bu yeni örnek, bloğun dolgu sınırlarının blok içeriğinin (içeren blok - gövde öğesi) sınırına değmemesi durumunda ikinci bloğun nerede olacağını göstermektedir.

Boyut window özellik değerleriyle tanımlanabilir: top , right , Bottom ve left . Örneğin, bu özellikleri sıfıra sıfırlamak bloğun görünür alana sığacak şekilde gerilmesini sağlayacaktır. Tüm blok ofsetlerini sıfıra sıfırlar (Not: IE6'da blok Olumsuz uzayacak)

Bir kaplama maskesi oluşturmak için Olumsuz belgeyle birlikte kayarsa (önceki örnekte olduğu gibi), mutlak yerine sabit kullanabilir veya gövde stilini konum:göreli olarak ayarlayabilirsiniz. ilk konumlandırma bloğu görünüm (html öğesi stili IE'de çalışmıyor). Kaplama örneği.

pozisyon:mutlak çalıştırmalar haslayout .

Hatırlanması gereken en önemli şey:

• Bu konumlandırma şemasını kullanmak kötü bir uygulamadır çünkü akıştan blokları kaldırır.

konum:sabit

Bölüm 9'dan Görsel Biçimlendirme Modeli:
Sabit konumlandırma mutlak konumlandırma kategorisine girer. Aradaki fark, sabit blok konumunda içerik bloğunun görünüm portu tarafından belirlenmesidir. Bölümlemeyen cihazlar için sabit bloklar belgeyi kaydırırken hareket etmeyin. Bu bakımdan sabitlere benzerler. arka plan görselleri. Sayfalandırılmış cihazlar için sabit konumlu bloklar her sayfada tekrarlanır. Bu, her sayfanın altına imza yerleştirmek için kullanışlıdır. Sayfa alanından büyük olan bloklar kesilir. Sabit konumlu bloğun ilk içerik bloğunda görünmeyen kısımları yazdırılmayacaktır.
Örnekte dikkat edilmesi gerekenler:

• Sabit konumlandırma mutlak konumlandırma kategorisine girdiğinden "mutlak" için doğru olan her şey "sabit" için de geçerlidir (eleman yatay olarak sıkıştırılır, akıştan çıkarılır vb.)
• Blok görünür alana göre konumlandırılır ve sayfa boyunca kaydırılmaz.
• IE6'da blok "statik" bir blok olarak işlenir, ancak bunun için "eğlenceli" bir geçici çözüm vardır.
• Şu tarihte: Yazdır belgede, her sayfada "iki" bloğu görünecektir.

Hatırlanacak şeyler:

• Bloğun konumu "mutlak" modele göre hesaplanır, ancak buna ek olarak blok bazı referanslara göre sabitlenir. Şu medya türlerini kullanırken: handed , projeksiyon , screen tty ve tv blok görünür alana göre sabittir ve kaydırıldığında hareket etmez.
• Blok içeriği görünür alanın dışındaysa kullanıcılar tarafından görüntülenemeyebilir.
• "Basılı" medya durumunda, yazarlar öğenin her sayfada görünmesini istemeyebilirler. O halde @media için aşağıdaki kuralları kullanmak daha iyidir:

@media print ( #logo (konum: statik;))

konum:absolute gibi, konum:sabit de EI üzerinde bir haslayout tetikler.

konum:devralma

Bir blok için konum:inherit belirtilirse, üst bloğuyla aynı hesaplanan özellik değerlerini alır.
Yön ve görünürlük kullanımı dışında IE6 ve IE7'nin bu değeri desteklemediğini unutmayın (bkz.)

Hatırlanacak şeyler:

Blok ofseti
Blokları mutlak ve sabit bir şekilde konumlandırırken üst, sağ, alt ve sol için belirlenen yüzde değerlerinin ölçülere göre hesaplandığını unutmayın. içeren blok(bu bir ana blok olmayabilir)
"konum" ve "taşma"
overflow:hidden stilindeki bir blok, göreceli konumlandırılmış öğeleri (iç içe bloklar) kırpacaktır, ancak mutlak konumlandırılmış blokları asla gizlemeyecektir. Bunun nedeni ana bloğun her zaman kapsayıcı blok olmamasıdır ( "pozisyon"un "mutlak", "göreceli" ve "sabit" olarak ayarlandığı en yakın ata).
Bu, mutlak konumlandırılmış öğelerin bloğun dışında overflow:hidden stiliyle görüneceği anlamına gelir; söz konusu blok bir kapsayıcı blok olmadığı sürece veya iç eleman belirtilen blok. Bu örnek bunun nasıl çalıştığını göstermektedir.
Alanlar
Yazarlar, konumlandırma şemalarına bakılmaksızın öğe alanlarını kullanabilirler.
IE durumunda
IE'de blok konumlandırma bir nimet veya lanet olabilir:

• IE6'da, konum:relative (haslayout ile), bloğun ana kapsayıcı tarafından kırpılmasını önlemek için negatif kenar boşlukları kullanabilir (bu soruna bir çözüm gösteren bir örnek).
• Konumlandırılmış bir öğe "müdahale etmek" IE6 ve 7'de blok düzeni ve içerik kaplaması oluşturabilir (örnek)

Karışım sırası ve karışım seviyesi

• Sıraya göre kaynak kodu konumlanan bloklar normal akışta yer alan blokların önünde yüzebilir.
• Yazarlar, yalnızca konumlandırılmış bloklarda "z-index" özelliği aracılığıyla kaplamanın düzeyini belirtebilirler.
• IE6 ve 7'de, yalnızca konumlandırma gerçeği içeriğin çakışmasına neden olabilir (örnek için yukarıya bakın).

DrLangbhani hayalet benzetmesi:

Göreli konumu olan bir öğe her zaman akıştaki normal konumundan kaydırılır. Yani normal şartlarda olacağı yere göre yer değiştirir ve yer değiştirmesi çevresinde bulunan elemanların konumunu etkilemez. Bedenini terk etmiş bir hayalet gibi. Genişliği, yüksekliği olan, çevresini etkileyen ama görünmeyen bir beden. Hayalet bloklar hareket edebilir ancak yine de vücutlarına bağlıdırlar ve konumları hâlâ buradan ölçülür. Artık öğenin mutlak konumlandırması var, bu daha da kolay. Artık çevresini etkilemiyor (akışın dışına çıkıyor). O, bedeni olmayan gerçek bir hayalet gibidir. İlgili unsurlara gelince, sanki kendisi yokmuş gibi artık onları rahatsız etmiyor. Konumunu bulmak için, konum: göreceli veya konum: mutlak olan bir öğe bulana kadar her ataya bakar. Bu eleman bir referans noktası görevi görecektir. Konumlandırmalı bir öğe bulamazsa belgeye göre yönlendirilecektir.

Ve left, konumlandırılmış bir öğeyi belirli bir kenara göre dengelemenize olanak tanır. Aşağıdaki örnekte olası türler eleman konumlandırma:

1. konum : göreceli (göreceli olarak konumlandırılmış öğe). Left özelliği kullanıldığında, konumlandırılan öğe mevcut konumundan kaydırılır (negatif bir değer, öğeyi sola, pozitif bir değer, öğeyi sağa taşır). Soldaki örneği kullanırsak: 200px;
2. konum : mutlak (kesinlikle konumlandırılmış öğe). Left özelliğini kullanırken, konumlanan öğe, atasının sol kenarına göre kaydırılır (negatif bir değer, öğeyi sola, pozitif bir değer ise sağa taşır) ve ata, varsayılandan farklı bir konum değerine sahip olmalıdır - statik , aksi takdirde tarayıcı penceresinin sol kenarına göre sayılır (sabit konumdaki gibi). Örnek olarak solu kullanırsak: 40px.
3. konum : sabit (sabit konumlu eleman). Left özelliği kullanıldığında, konumlandırılan öğe, tarayıcı penceresinin sol kenarına göre kaydırılır (negatif bir değer, öğeyi sola, pozitif bir değer, öğeyi sağa taşır). Örnek olarak solu kullanırsak: 40px.
4. konum : statik (statik olarak konumlandırılmış öğe - bu varsayılandır). Left özelliğinin değeri, öğenin konumunu etkilemez.

Daha detaylı bilgi Makaledeki CSS eğitiminde elemanların konumlandırılması hakkında bilgi alabilirsiniz.

Tarayıcı desteği

Mülk			Opera		IExplorer	Kenar
konum	1.0	1.0	4.0	1.0	7.0	12.0

CSS sözdizimi:

konum: "statik | mutlak | sabit | göreceli | ilk | devral";

JavaScript sözdizimi:

Object.style.position = "mutlak"

Gayrimenkul değerleri

Anlam	Tanım
mutlak	Mutlak konumlandırma. Ofsetlendiğinde, bir öğe atasının belirtilen kenarına göre kaydırılır ve ata, varsayılan - static değerinden farklı bir konum değerine sahip olmalıdır, aksi takdirde sayım, tarayıcı penceresinin belirtilen kenarına göre olacaktır (position: ile olduğu gibi): sabit).
sabit	Sabit konumlandırma. Ofsetlendiğinde öğe, tarayıcı penceresinin belirtilen kenarına göre hareket ettirilir.
statik	Statik konumlandırma. Öğeler akışta göründükleri sırayla görüntülenir HTML belge. Bu varsayılan değerdir.
akraba	Göreceli konumlandırma. Ofsetlendiğinde, bir öğe mevcut konumuna göre kaydırılır.
	Özelliği varsayılan değerine ayarlar.
	Değerin üst öğeden miras alındığını belirtir.

CSS sürümü

CSS2

Miras

HAYIR.

Animasyonlu

HAYIR.

Kullanım örneği

h1(konum:statik;)

Bu örnekte, gösterim amacıyla tüm olası konumlandırma türleri (statik, göreli, mutlak ve sabit) ele alınmaktadır. Örneğimizin sonucu.