mutlak vs göreli konum genişlik ve yükseklik

Question

Mutlak & göreceli konumun ne olduğunu biliyorum ama bazı noktalar hala silinmedi. referans için

CSS:

.rel{ 
    position:relative; 
    background:red; 
} 
.abs{ 
    position:absolute; 
    background:blue; 
} 

html:

hemen

<div class="rel">rel</div> 
<div class="abs">abs</div> 

noktalar şunlardır:

• nispi div% 100 genişliği otomatik olarak alır ancak mutlak div yalnızca içerik genişliği alır . niye ya? Nede% 100 verdiğimde

• orada göreceli div ama mutlak div hiçbir etkisi% 100 yüksekliğini alır. niye ya? o da mutlak div shift var 30px ama üst verdiğinde:

• i margin-top verdiğimde 30px sonra sadece göreli div kayması. niye ya?

• i bu kadar mutlak div top:0 , left:0 vermeyin

  div yüksekliği yukarıda sürer. niye ya? position:absolute Ayar

Answer 1

1. belge yapısının normal akışından söz konusu öğeyi kaldırır. Yani, bir genişliği açıkça belirlemedikçe, ne kadar geniş olacağını bilmezsiniz. width:100%'u açık bir şekilde ayarlayabilirsiniz, eğer bu etkiyi takip ederseniz.

2. position:relative numaralı bir öğe, position:static öğesinin yaptığı gibi aynı şekilde davranır. Bu nedenle, üst öğenin tanımlı bir yüksekliğe sahip olmaması durumunda height:100% ayarının hiçbir etkisi olmayacaktır. Buna karşılık, mutlak olarak konumlandırılmış elemanlar belge akışından çıkarılır, böylece mevcut elemanlarının sahip oldukları yüksekliğe göre ayarlanması serbesttir.

3. Bu, muhtemelen HTML'nizdeki ana öğelerle ilgili bir şeydir, ancak sayfanızın tam HTML'sini ve CSS'sini sağlamadıkça daha fazla yardımcı olamam.

4. üst ve sol özelliklerini varsayılan değeri otomatik olduğunu. Bu, tarayıcının bu ayarları sizin için hesaplayacağı ve position:absolute yoksa öğenin nerede oluşturulacağını ayarlaacağı anlamına gelir.