Mutlak konum içinde mutlak konumlandırma

3 divelementim var.

1. divdaha büyük (sarma) veposition:relative;

2. divmutlak olarak 1. divgöreceli konumlandırmaya konumlandırılmıştır (ve 1. sıradadır div)

3. div, 2. içinde bulunur divve ayrıca mutlak konumlandırmaya sahiptir.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

Neden 3. divpozisyon 2. için mutlaktır div(ki bu da 1. pozisyon için mutlaktır div) ve divgöreceli pozisyonu olan 1. pozisyon için değil ?

Çünkü 3. divmutlak konumlandırılmış 2. mutlak konumlandırmadır div.

Çünkü position: absolutetıpkı çocuklar için göreceli konumu sıfırlar position: relative.

Bunun etrafından dolaşmanın bir yolu yok - eğer üçüncünün divkesinlikle birincisine göre konumlandırılmasını istiyorsanız, onu ilkinin çocuğu yapmanız gerekecek.

Her ikisi de position:relativeve position:absolutekapsayıcı öğeleri konumlandırma ataları olarak oluşturun.

Div 3'ün div 1'e göre konumlandırılmasına ihtiyacınız varsa, onu div 1'in doğrudan alt öğesi yapın.

Unutmayın ki position: relativeöğenin doğal konumuna göre konumlandırıldığı ve position: absoluteöğenin birinci position:relativeveya position:absoluteatasına göre konumlandırıldığı anlamına gelir .

Statik konum : statik konum, herhangi bir konum belirtilmemişse HTML dosyanızın normal akışında bir öğenin görüneceği varsayılan yoldur.

Önemli: top, right, bottomve leftözellikleri YOK ETKİSİ ÜZERİNE BİR statik ELEMENT KONUMLANDIRILMIŞTIR VAR.

Göreli konum : bir öğeyi göreli değerle konumlandırmak, öğeyi (ve kapladığı alanı) HTML dosyanızın normal akışında tutar.

Daha sonra özelliklerini kullanarak bazı miktarda eleman taşıyabilirsiniz left, right, topve bottom. Ancak bu, öğenin sayfadaki diğer öğelerle üst üste gelmesine neden olabilir — bu, istediğiniz etki olabilir veya olmayabilir.

Göreceli olarak konumlandırılmış bir eleman bulunduğu yerden hareket edebilir, ancak kapladığı alan kalır.

Mutlak konum : mutlak konum değerini bir öğeye uygulamak, onu normal akıştan çıkarır. Mutlak konumlandırılmış öğeyi taşıdığınızda, referans noktası, statik dışında bir konumu bildirilmiş en yakın içeren öğesinin üstü / soludur - buna en yakın konumlandırma bağlamı da denir. Dolayısıyla, statik dışında bir konuma sahip içeren bir öğe yoksa, gövde öğesinin sol üst köşesine konumlandırılacaktır.

Sizin durumunuzda 3. en yakın konteynır 2.'dir.

Yine başka bir açıklayıcı cevap.

Mevcut senaryonuz şudur:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

Ve onunla biraz mücadele ediyorsun.

HTML'yi değiştirebiliyorsanız, şunu yapmanız yeterlidir:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

3 nedeni divelemanı kesinlikle 2 konumlandırılmış divCSS Spec açıkladığı gibi çünkü eleman olduğunu burada "üst" eleman (daha iyi şunları söyledi: içerikli blok), çünkü bir bir kesinlikle konumlandırılmış elemanı değildir , ille onun hemen üst öğe ancak daha ziyade hemen konumlandırılmış öğesi, yani konumu herhangi bir şeye ayarlanmış herhangi bir öğe, staticörneğinposition: relative/absolute/fixed/sticky;

Bu nedenle, kodunuzda mümkün olduğunda, 3. divöğenin kesinlikle 1. öğeye göre konumlandırılmasını divistiyorsanız, 2. divöğenizi position: static;varsayılan değeri olarak yapmalısınız (veya yalnızca position: ...2. öğenizin kural kümesindeki herhangi bir bildirimi kaldırmalısınız div) .

Yukarıdaki 1 yapacak içeren blok mutlak konumlandırılmış 3rd 2'nci görmezden gelerek bu konumlandırma amaçlı.divdivdiv

Umarım yardımcı olur.

Birinin hala buna cevap araması durumunda.

Bu sonucu clear: both;, çocuğu sıfırlayan ve kendi absolutekonumlandırmasını kullanmasına izin veren ilk kesinlikle konumlandırılmış div'e bir stil ekleyerek elde etmeyi başardım .