Bir Elementin En Yakın Göreceli Konumlanmış Atasını Bulma

Faydalı Alternatif Metin Yazma

Bu makale 15 Mart 2021 tarihinde güncellenmiştir.

Bir elemanın olduğu bir CSS konumlandırma ikilemiyle hiç karşılaştınız mı? position: absolute beklediğiniz gibi konumlanmıyor mu? Bir öğe üzerinde mutlak konumlandırma ayarlamak, onu, konumu başka bir şeye ayarlanmış en yakın atasına göre konumlandıracaktır. static (varsayılan).

Yukarıdaki resimde, mutlak konumlu öğe her iki örnekte de aynı CSS ile konumlandırılmıştır:

.absolute {
position: absolute;
top: 100%;
left: 0;
}

Ama her örnekte farklı bir yerde bitiyor. Bunun nedeni, ilk örnekte ebeveyninin (pembe öğenin) position: relativeikincisinde ise göreli konumlandırmaya sahip başka bir atadır (gri öğe).

Kalemi Gör
Göreceli ve mutlak konumlandırma
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Hiçbir ata konumlandırılmamışsa, bir öğenin position: absolute ile ilgili olarak yerleştirilecektir. <body>.

Bunun gibi nispeten basit bir örnekte, CSS’nin hızlı bir şekilde incelenmesi, hangi ataların göreli konumlandırmaya sahip olduğunu belirlemeyi kolaylaştırır ve istenen etkiye sahip değillerse stillerimizi buna göre ayarlayabiliriz. Ancak bazen, daha karmaşık kod tabanlarında (özellikle çok sayıda iç içe öğeyle), bir öğenin hangi atasının göreli konumlandırmaya sahip olduğunu bulmak biraz daha zor olabilir. Bu genellikle tam genişlikte açılır alt menülere sahip karmaşık başlıklar oluştururken başıma gelir: Genellikle bunları tüm üstbilgiye göre konumlandırmam gerekir, ancak yanlışlıkla bir yere ayarladım position: relative istenen davranışı bozan başka bir öğede.

Tüm bu kodlarda gezinmek zaman alıcı olabilir, ancak ne mutlu ki Javascript’te en yakın konumlandırılmış ebeveyni bulmanın daha kolay bir yolu var – bunu doğrudan tarayıcı konsolunda yapabiliriz.

Chrome ve Firefox’ta geliştirici araçlarında Konsol sekmesini açarsak, şu anda seçili olan öğeyi yazarak alabiliriz. $0. O zaman kullanabiliriz offsetParent konumu başka bir şeye ayarlanmış olan öğeye en yakın atayı bulmak için nesne özelliği static. Bir öğe seçip bunu konsola yazmayı deneyin:

$0.offsetParent

Bu aslında bize konum değerini söylemez (ister relative, fixed veya başka bir şey). Ama kullanabiliriz getComputedStyle elemanın değerini öğrenmek için position Emlak:

getComputedStyle($0.offsetParent).position

Yazarak $_ konsolda, en son değerlendirilen ifadeyi bir değişken olarak alabiliriz, bu da bunu daha hızlı hale getirebilir:

$0.offsetParent

bize elemanı gösterir. O zamanlar:

getComputedStyle($_).position

konum değerini alır.

Birkaç uyarı var: offsetParent öğenin konumu ayarlanmışsa null döndürür fixed veya kendisi veya ebeveyni display: none. (MDN belgelerine bakın detaylar için.)

Tecrübelerime göre position: relative en yaygın olarak bir nesli dengelemek için kullanılır (kullandığım örnekte olduğu gibi), ancak şunu akılda tutmaya değer fixed veya sticky değerler de davranışa izin verir – ancak belki de bu öğelerin tarayıcıda fark edilmesi biraz daha kolaydır!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.