HTML öğelerinin konumlandırılması. CSS - Konumlandırma bloğu öğeleri

Bugünlerde web geliştiricileri, çeşitli CSS tekniklerini kullanarak karmaşık web sayfası düzenleri oluşturabilirler. Bu tekniklerin bazılarının uzun bir geçmişi vardır (yüzer), diğerleri (flexbox) son yıllarda popülerlik kazanmıştır.

Bu yazıda, CSS konumlandırma hakkında az bilinen bazı şeylere yakından bakacağız.

Başlamadan önce, farklı konumlandırma türlerinin temellerini kısaca gözden geçirelim.

Mevcut konumlandırma yöntemlerine genel bakış

CSS position özelliği, bir öğenin konumlandırma tipini tanımlar.

Konumlandırma Seçenekleri

static, konumlandırma özelliğinin varsayılan değeridir. Bu öğenin konumlandırma kullanmadığını bildiriyoruz - konumlandırma yalnızca varsayılandan farklı bir konumlandırma türü belirtirseniz uygulanır.

Bunu yapmak için, konum özelliğini aşağıdaki değerlerden birine ayarlayın:

• akraba
• mutlak
• sabit
• yapışkan

Ve yalnızca konumlandırmayı ayarladıktan sonra, öğeyi dengeleyen özellikleri kullanabilirsiniz:

• Sağ
• alt
• Bu özelliklerin başlangıç ​​değeri auto anahtar sözcüğüdür.

Bir öğenin konum özelliği mutlak veya sabit olarak ayarlanmışsa, o zaman kesinlikle konumlanmış bir öğe olduğunu unutmayın. Ayrıca, konumlandırılmış öğeler için, yığınlama sırasını belirleyen z-index özelliği çalışmaya başlar.

Ana konumlandırma yöntemleri arasındaki farklar

Şimdi, mevcut konumlandırma türleri arasındaki üç temel farka hızlıca bakalım:

• mutlak (mutlak) konumlu elemanlar akımdan tamamen kaldırılır, yerlerini en yakın komşular alır.
• nispeten konumlanmış (göreceli) ve yapışkan (yapışkan) akıntıdaki yerlerini korurlar ve en yakın komşuları orayı işgal etmez. Bununla birlikte, bu elemanların dolgusu yer kaplamaz ve diğer elemanlar tarafından tamamen göz ardı edilir ve bu, üst üste binen elemanlara yol açabilir.
• sabit öğeler (ve sabit konumlandırma bir tür mutlak konumlandırmadır) her zaman görünüme göre konumlandırılır (ataların konumu göz ardı edilir), yapışkan öğeler ise kaydırma ile en yakın ataya göre konumlandırılır (taşma:otomatik). Ve sadece bu tür ataların yokluğunda, görünürlük bölgesine göre konumlandırılırlar.

Bunu demoda daha ayrıntılı olarak görebilirsiniz:

Not: "Yapışkan öğeleri" konumlandırma, sınırlı tarayıcı desteğiyle hâlâ deneysel bir teknolojidir. Elbette, dilerseniz, bu işlevi tarayıcıya eklemek için bir çoklu dolgu kullanabilirsiniz, ancak bu özelliğin yaygınlığının düşük olması nedeniyle bu makale ele alınmayacaktır.

Mutlak konum tipine sahip konumlandırma elemanları

Eminim çoğunuz mutlak konumlandırmanın nasıl çalıştığını biliyorsunuzdur. Ancak yeni başlayanlar için içindeki pek çok şey kafa karıştırabilir.

Bu nedenle, konumlandırmanın az bilinen özelliklerini anlatırken ondan başlamaya karar verdim.

Bu nedenle, kesinlikle konumlandırılmış bir öğe, konumlandırılmış en yakın atasından kaydırılır. Elbette, atalardan herhangi birinin statik dışında bir konumu varsa bu işe yarar - öğenin konumlanmış üst öğesi yoksa, kapsamdan kaydırılır.

Bu, aşağıdaki örnekle gösterilmiştir:

Bu demoda, yeşil kutu başlangıçta kesinlikle sıfır dolgu ile konumlandırılmıştır bottom:0 ve left:0 , atası (kırmızı kutu) hiç konumlandırılmamıştı.

Bununla birlikte, dış sargıyı (jumbotron sınıfına sahip bir öğe) nispeten konumlandırdık. Atalarının konumlandırma türü değiştiğinde yeşil bloğun konumunun nasıl değiştiğine dikkat edin.

Kesinlikle konumlandırılmış öğeler, float özelliğini yok sayar

Kayan bir öğeye mutlak veya sabit konumlandırma uygularsak, float özelliği none olarak ayarlanır. Öte yandan, göreli konumlandırmayı ayarlarsak, eleman yüzer durumda kalacaktır.

İlgili demoya bir göz atın:

Bu örnekte, sağa kayan iki farklı öğe tanımlıyoruz. Kırmızı kutu mutlak olarak konumlandırıldığında, kayan nokta özelliğinin değerini göz ardı ederken, görece konumlanan yeşil kutu kayan nokta değerini korur.

Kesinlikle konumlandırılmış satır içi öğeler, blok öğeler haline gelir

Mutlak veya sabit konumlandırmalı bir satır içi öğe, bir blok öğenin özelliklerini kazanır. Satır içi öğelerin blok öğelere dönüştürülmesi tabloda daha ayrıntılı olarak açıklanmaktadır.

Bu durumda, iki farklı öğe oluşturduk. İlk (yeşil blok) bir blok elemanıdır ve ikincisi (kırmızı blok) bir satır içi elemandır. Başlangıçta, yalnızca yeşil blok görünür.

Kırmızı kutu görünmüyor çünkü ona ayarlanan genişlik ve yükseklik özellikleri sadece blok seviyesi ve satır içi blok elemanları ile çalışıyor ve içeriği olmadığı için herhangi bir boyutu yok.

Kırmızı bir kutuya mutlak veya sabit bir konum atadığınızda bloklu hale gelir ve içinde belirtilen blok boyutları geçerli olur.

Kesinlikle konumlandırılmış öğelerde dolgu çökmesi olmaz

Varsayılan olarak, iki dikey kenar boşluğu birbirine dokunduğunda, en büyüğüne eşit olacak şekilde birleştirilirler. Buna kenar boşluğu denir.

Buradaki mutlak konumlu elemanların davranışı, kayan elemanlara benzer - dolguları komşularıyla birleştirilmez.

Bu demoda öğenin dolgusu 20 pikseldir. Dolgusu, ana öğenin dolgusu ile birlikte çöker, yine 20px. Gördüğünüz gibi sadece mutlak konumlandırma çökmez.

Ancak dolgunun çökmesini nasıl önleyebiliriz? Aralarına bir ayırıcı koymamız gerekiyor.

Bu dolgu veya kenarlık olabilir ve hem üst hem de alt öğelere uygulanabilir. Başka bir seçenek de ana öğeye bir düzeltme eklemektir.

Öğeleri piksel ve yüzdelerle konumlandırma

Öğeleri konumlandırmak için hiç piksel yerine yüzde kullandınız mı? Yanıt evet ise, öğenin ofsetinin seçilen birimlere (pikseller veya yüzdeler) bağlı olduğunu bilirsiniz.

Biraz utanç verici, değil mi? İlk önce spesifikasyonun yüzde ofseti hakkında ne söylediğine bir bakalım:

Ana bloğun genişliğinin (sol ve sağ için) veya yüksekliğinin (üst veya alt) yüzdesi olarak ofset. Yapıştırılmış elemanlar için ofset, akışın genişliğinin (sol ve sağ için) veya yüksekliğinin (üst veya alt) yüzdesi olarak hesaplanır. Negatif değerlere izin verilir.

Bahsedildiği gibi, ofseti yüzde olarak ayarlarken, elemanın konumu ebeveyninin genişliğine ve yüksekliğine bağlıdır.

Demo bu farkı gösterir:

Bu örnek, ofset için pikselleri ve yüzdeleri kullanır. Elbette, piksel cinsinden bir ofset belirtilirken, öğe olması gereken yere kaydırılır.

Ofset için yüzdeleri seçersek, sonuç ana öğenin boyutuna bağlı olacaktır. İşte yeni konumun nasıl hesaplandığını gösteren bir görselleştirme:

Not: Muhtemelen bildiğiniz gibi, transform özelliği (çeşitli çeviri işlevleriyle birlikte) bir öğenin konumunu değiştirmenize de olanak tanır. Ancak bu durumda, yüzdeler kullanılırken, hesaplama, ebeveyninin değil, öğenin kendisinin boyutuna dayalı olacaktır.

Çözüm

Umarım bu makale, CSS'de konumlandırmayı daha iyi anlamanıza yardımcı olmuş ve ana konuları açıklığa kavuşturmuştur.

Bir web geliştiricisinin görsel olarak tamamlanmış bir sayfanın nasıl görüneceğini düşünmek zorunda olmadığını hayal edin. Sadece kodu yazar, öğeler sayfada yukarıdan aşağıya (blok) ve soldan sağa (satır içi) sıralanır. Belgede kod ne kadar yüksek yazılırsa, sayfada o kadar yüksek görünür.

Genel olarak, öğelerin doğal davranışını ve sayfada görüntülenme sırasını - belgenin akışını göreceğiz. Ama biz bu sıralamadan hiç memnun kalmadık, logoyu sol üst köşeye, butonu da biraz sağa yerleştirmek istiyoruz. Tüm unsurlar üzerinde tam kontrole ihtiyacımız var, nerede ve ne olacağına biz karar veririz. Ve bunun için, akıştaki öğelerin olağan davranışını değiştiren bir araca (özelliğe) ihtiyacınız var. Bu özellik nedir?

İÇİNDE css stiller buna konumlandırma denir (konum) normal olabilir (statik), akraba (akraba) ve mutlak (mutlak).

CSS'de göreli konumlandırma

-de göreceli konumlandırma, blok orijinal konumuna göre hareket ettirilir. Ancak, bloğa yazarak:

konum: göreli;

bir şey olmaz, olduğu yerde kalır. A, blok koordinat sistemini hareket ettirir (üst, alt, sol, sağ), hem pozitif hem de negatif değerlerle.

Nasıl çalışır?

Sınıfla birlikte sarı bloğun içinde blok-sarı sınıfı olan kırmızı bir blok var göreli blok. Normal bir akışta, koddaki son blok olduğu için kırmızı blok sarı blokla örtüşür.

Kırmızı bloğu 10 piksel aşağı taşımamız gerekiyor. Bu, yalnızca kırmızı bloğun konumunu zorla değiştirerek yapılabilir. bu şekilde yazıyoruz üst: 10 piksel, ancak bu 10 pikselin neyden sayılacağını belirtmeniz gerekiyor?

reçete yazma pozisyon: göreceli, mevcut konumuna göre neyin sayılacağını netleştiriyoruz.

blok-sarı (
arka plan rengi: #ffe70f;
}

göreli blok (
konum: göreli;
üst: 10 piksel;
arka plan rengi: #ed5b77;
}

Resimde, kırmızı bloğun orijinal konumundan 10 piksel aşağı doğru nasıl hareket ettiğini görebiliriz.

Koddan kaldırılırsa pozisyon: göreceli, ardından blok yerinde kalacaktır. Ve eğer bunun yerine akraba, yazmak mutlak, daha sonra varsayılan olarak, bu 10 piksel tarayıcı penceresinin kenarından sayılacak ve sonuç olarak, bloğumuz tersine yükselerek kendisini tarayıcının alt kenarına çekecektir. Ve bu planlarımızın bir parçası değildi.

CSS'de mutlak konumlandırma

resimdeki blok kesinlikle konumlandırılmış, bu koordinat sistemi tarayıcının kenarından sayıldığında, sadece bir kelimeyi değiştirerek, bloğun konumunu değiştirdik.

pozisyon: mutlak;

Bir özellik var. mutlak konumlandırma satır içi öğeleri de etkiler. Bir satır içi öğe verilirse pozisyon: mutlak, o zaman bir blok gibi davranacaktır. Bu özelliğe benzer - Ekran bloğu.

Hepsi bu kadar değil, "göreceli" ebeveynin içinde bulunan "mutlak" eleman, koordinat referans noktasını değiştirir ve ebeveynden konumlandırmaya başlar.

Sınıfla engelle mutlak blok ebeveynin içinde olmak blok-sarı.

blok-sarı (
konum: göreli;
dolgu: 10px
arka plan rengi: #ffe70f;
}

Sarı blok olduğundan göreceli konumlandırma, ardından kırmızı blok mutlak konumlandırma, verilen pikseller kadar kırmızıya göre kaydırılır.

blok-mutlak(
pozisyon: mutlak;
alt: 10 piksel;
sol: 10 piksel;
arka plan rengi: #ed5b77;
}

Sabit konumlandırma

Sayfayı kaydırırken, ile blok pozisyon: sabit, bir gezinme çubuğunu sabitlemek için kullanılan yaygın bir yöntem olan yerinde kalacaktır.

z-endeksi

"Mutlak" blokların çakışan sırasını çözer. Kırmızı bloğun sarı bloğun üstünde olmasına ihtiyacımız var, sonra şunu belirtiyoruz: z-endeksi: kırmızı için 2 ve z-endeksi: Sarı için 1.

blok-kırmızı (
konum: göreli;
z-endeksi: 2;
arka plan rengi: #ffe70f;
}

blok-sarı(
pozisyon: mutlak;
üst: 20 piksel;
z-endeksi: 1;
arka plan rengi: #ed5b77;
}

Konumlandırma, blok düzeninde anahtar kavramlardan biridir. Bununla ilgilendikten sonra, sizin için çok şey 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 pozisyon: statik

Varsayılan olarak, sayfadaki tüm öğeler statik olarak konumlandırılmıştır (konum: statik), bu, öğenin konumlandırılmadığı ve belgede her zamanki yerinde, yani html işaretlemesindeki sırayla göründüğü anlamına gelir.

Önceden ayarlanmış konumu varsayılan olarak değiştirmeniz gerekmedikçe, bu özelliği herhangi bir öğeye özel olarak atamanıza gerek yoktur.

#içerik( konum: statik; )

2. konum: göreli

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

#content 20px aşağı ve 40px sola kaydıralım:

#content( konum: göreli; üst: 20 piksel; sol: -40 piksel; )

Şimdi #content bloğumuzun olması gereken yerde boş bir alan olduğuna dikkat edin. #content bloğunun ardından, #footer bloğu aşağı hareket etmedi çünkü #content, onu taşımamıza rağmen hala belgedeki yerini koruyor.

Bu aşamada, göreli konumlandırma çok kullanışlı görünmeyebilir, ancak sonuçlara varmak için acele etmeyin, makalenin ilerleyen bölümlerinde ne için kullanılabileceğini öğreneceksiniz.

3. pozisyon: mutlak

Mutlak konumlandırma ile (konum: mutlak), öğe belgeden kaldırılır ve ona 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:200 piksel; )

Bu kez, #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 sayfanın konumuna yükseldi. blok kaldırıldı. Ve #div-1a bloğunun kendisi tam olarak sayfanın sağ üst köşesinde bulunur.

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

4. pozisyon: sabit

Sabit konumlandırma (konum: sabit), mutlak konumlandırmanın bir alt kümesidir. Tek farkı her zaman ekranın görünen alanında olması ve sayfada gezinirken hareket etmemesi. Bu yönüyle biraz sabit bir arka plan görüntüsü gibidir.

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

Konum: sabit olan IE'de, her şey istediğimiz kadar pürüzsüz değil, ancak var çok şekilde bu kısıtlamaları atlayın.

5. konum:göreli + konum:mutlak

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

#içerik ( konum:göreli; ) #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öreli ve mutlak konumlandırmayı kullanarak iki sütun yapmayı deneyebilirsiniz.

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

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

Ve şimdi bir sorunuz olmalı: "Örneğimizdeki diğer unsurlar nereye gitti?". Kesinlikle yerleştirilmiş blokların altında kayboldular. Neyse ki, bunu düzeltmenin bir yolu var.

7. İki sabit yükseklik kolonu

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

#içerik ( konum:bağıl; 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; )

Metnin sütunlara hangi boyutta yerleştirileceğini ve hangi yazı tipinin kullanılacağını asla önceden bilemeyeceğimiz için çözüm pek uygun değil.

8. Yüzer

Değişken yükseklikteki sütunlar için mutlak konumlandırma uygun değildir, o yüzden başka bir seçeneğe bakalım.

Bloğa bir kayan nokta atayarak, onu mümkün olduğunca sağ (veya sol) kenara doğru itiyoruz ve bloğu izleyen metin onun etrafına sarılacak. Genellikle bu teknik resimler için kullanılır, ancak elimizdeki tek araç olduğu için onu daha karmaşık bir görev için kullanacağız.

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

9. Kayan sütunlar

İlk bloğa float: left ve ardından ikinci bloğa float: left atarsak, blokların her biri sol kenara bastırılır ve değişken yükseklikte iki sütun elde ederiz.

#div-1a ( float:left; genişlik:150px; ) #div-1b ( float:left; genişlik:150px; )

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

#div-1a ( float:right; genişlik:150px; ) #div-1b ( float:left; genişlik:150px; )

Ancak şimdi başka bir sorunumuz var - sütunlar ana kabın ötesine geçerek tüm düzeni bozuyor. Bu, oldukça basit bir şekilde çözülebilmesine rağmen, yeni başlayan yerleşim tasarımcıları için en yaygın sorundur.

10. Şamandırayı temizle

Şamandıra temizliği iki şekilde yapılabilir. Sütunlardan sonra başka bir blok varsa, ona clear: her ikisini de atamanız yeterlidir.

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

Veya üst kapsayıcıya overflow: hidden özelliğini atayın

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

Her iki durumda da sonuç aynı olacaktır.

Çözüm

Bugün sadece temel konumlandırma teknikleri ve en basit örnekler ele alınmıştır. Ayrıca, acemi mizanpaj tasarımcılarına yardımcı olmak için her zaman Ivan Sagalaev'in bir zamanlar bana çok yardımcı olan bir dizi makalesini öneririm.

css bloklarını konumlandırma mizanpajın en önemli aşamalarından biri, çünkü bu, sitenin uyarlanabilirliğini veya gelecekte (şu anda gerekli değilse) uygulanma olasılığını etkileyen şeydir ve ayrıca daha fazla ölçeklendirme üzerinde önemli bir etkiye sahiptir. site. "Talihsiz düzen tasarımcılarının" öyle bir düzen yapması alışılmadık bir durum değildir ki sonunda onu atmak bir şeyi değiştirmekten daha kolaydır, ancak aynı zamanda tamamen düzene uygun görünebilir. Bu durum, belirli bir konumlandırma türünün nerede ve ne zaman kullanılacağını anlamamaktan 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 4 ana değeri dikkate alacağız:

• mutlak
• statik
• akraba
• sabit

Mutlak blok konumlandırma (mutlak)

Listemizdeki ilk konumlandırma yöntemi mutlaktır. Bu özellik atandığında, blok kendi başına bir birim haline gelir ve sayfa öğelerinin geri kalanı konumunu etkilemez ve diğer öğeleri etkilemez. Bloğun boyutu, genişlik ve yükseklik özellikleri tarafından, sayfadaki konumu ise üst özellikler tarafından belirlenir. sol, sağ ve alt bu parametreler dolguyu üst, sol, sağ ve alt kenarlardan ayarlar. Bloğun bir üst öğesi yoksa ve ayrıca üst öğenin konumu statikten farklıysa, top, left, bottom, right özellikleri girintileri sayfanın başından, aksi takdirde sayfanın kenarlarından ayarlar. ana öğe.

Çoğu zaman, bu tür konumlandırma, bloğa sağ veya alt kenara basılması gerektiğinde kullanılır. Bu düzeni düşünün.

Kolaylık sağlamak için bloklar çok renkli bir çerçeveyle vurgulanmıştır. İşaretleme şöyle görünecektir:

XHTML

İlişki ( konum: göreceli; ) .yellow ( konum: mutlak; sağ: 10 piksel; alt: 10 piksel; )

Bu örnekte, girintiyi sağ ve alt kenarlardan ayarlamak için right ve bottom özelliklerini kullandık. Bu özellik değerleri top ile eşdeğerdir: Eleman yüksekliği 10px ve sol: Eleman genişliği 10px.

Mutlak konumlandırma, bazen bir öğenin üzerinden diğerine "atlamak" gerektiğinde de kullanılır.

Statik konumlandırma (statik)

Her sayfada oluşan ve genellikle çoğu öğe için ayarlanan en yaygın konumlandırma türü statiktir, css'de statik olarak yazılır. Çoğu HTML etiketi için bu değer varsayılan olarak belirlenir. konum açıkça ayarlanmamışsa, değer statik olacaktır. Bu düzenleme ile elemanlar alt alta sıralanır ve her bir elemanın penceresindeki koordinatlar, onlara en yakın olan elemanlara göre konum: statik veya konum: göreli olarak değişir. Top, left, right, bottom özellikleri bu konumlandırma ile çalışmaz, margin özelliğinden dolayı konum değiştirilir.

Göreceli konumlandırma (göreceli)

Bu tür konumlandırma statik konumlandırmaya çok benzer, tek fark öğenin konumu üst, sol, sağ, alt ve kenar boşluğu özellikleriyle değiştirilebilmesidir.

Sabit konumlandırma (sabit)

Koordinatları ayarlama özelliklerine göre sabit konumlandırma, mutlak olana benzer, ancak konum HTML sayfasına göre değil, tarayıcı penceresine göre hesaplanır, yani. top: 10px özelliği ile, üst dolguyu 10px olarak ayarlayacaksınız TARAYICI PENCERESİNDEN ve hangi sayfa kaydırma seviyesinde olursanız olun, bu öğe her zaman ekranınızı takip edecektir.

Genellikle, kullanıcının her zaman önemli bilgilere veya görünürde ilginç sayfalara bağlantılara sahip olması için gezinme öğeleri için kullanılır.

Mutlak konumlandırmanın CSS'de nasıl çalıştığını ve ekrandaki öğeleri kaybetmenin nasıl olduğunu hâlâ anlamadınız mı? Bu büyüyü keşfedelim.

Konumlandırmaya giriş

position: absolute değerini ayarladığınızda öne çıkan öğenin kendisi değil, üst kabıdır, çünkü CSS ona göre konumlandırılmıştır. İşin zor yanı, her zaman öğenin doğrudan ebeveyni olmamasıdır.

Oyuncak bebek gibi iç içe geçmiş dört div içeren bir kod düşünün.

Box-1 , box-2 ve box-3 marjlı güzellik için ortalanmıştır: otomatik ve esnek CSS özellikleri. Kutu-4 bloğu, belge akışında varsayılan konumunda kalır.

gövde ( ekran: esnek; ) .box-1, .box-2, .box-3 ( ekran: esnek; kenar boşluğu: otomatik; )

4 öğenin tümü varsayılan konumlandırmaya sahiptir. Şu anda, düzen şöyle görünür:

Neye göre konumlanıyoruz?

Kendini konumlandırmak için bir elemanın iki şeyi bilmesi gerekir:

• hangi ebeveyn başlangıç ​​noktası olacak;
• referans noktasına (üst, alt, sağ veya sol) göre ofset değeri.

box-4 üzerinde position: absolute tanımlarsanız, o öğe normal belge akışından çıkar. Ancak artık ofset koordinatları ayarlanmadığı için yerinde kalıyor. Bir öğenin genişliği CSS'de tanımlanmamışsa, içeriğinin genişliğine (artı dolgu ve kenarlık) eşit olacaktır.

Şimdi top: 0 ve left: 0 özelliklerini ekleyelim. Öğe, bu koordinatlar için hangi üst kapsayıcının kaynak olacağını belirlemelidir. Statik olmayan bir konuma sahip en yakın öğe haline gelir (çoğunlukla konum: göreceli). box-4, atalarını birer birer yoklamaya başlar. Varsayılan olarak CSS'de konumlandıklarından (unset) ne box-3 , ne box-2 ne de box-1 uygun değildir.

Konumlandırılmış bir üst öğe bulunamazsa, öğe belgenin gövdesine göre konumlandırılır:

box-1 öğesinde position:relatif ayarlarsanız, bu referans noktası olacaktır:

Mutlak olarak konumlandırılmış bir öğe, en yakın konumlandırılmış atasına göre konumlandırılır.

Bir referans noktası bulunduğunda, DOM ağacında bunun üzerindeki her şeyin önemi sona erer.

Konum: göreceli olarak kutu-2'ye göre ayarlarsanız, kutu-4 buna göre konumlandırılacaktır, çünkü bu ata daha yakındır.

Benzer şekilde kutu-3 kabı için: