Mutlak konum ve taşma gizli

135

Biri diğerinin içine gömülü iki DIV var. Dış DIV mutlak olarak konumlandırılmamışsa, mutlak olarak konumlandırılan iç DIV, dış DIV'nin gizlediği taşmaya uymaz ( örnek ).

Dış DIV'yi mutlak konuma ayarlamadan iç DIV'nin dış DIV'nin gizli taşmasına uymasını sağlama şansı var mı (bu, tüm düzenimizi bozacaktır)? Ayrıca, bir TD tablosundan ( örnek ) "büyümemiz" gerektiğinden, iç DIV'mize göre konum bir seçenek değildir .

Başka seçenek var mı?

— Zardoz
kaynak

283

Dış Make <div>için position: relativeve iç <div>için position: absolute. Senin için çalışmalı.

— shankhan
kaynak

5

İkinize de teşekkürler. Her zaman pozisyon düşündüm: varsayılan değer göreceli. Statiğin varsayılan olduğunu öğrendim. Her iki cevap da eşdeğer olduğu ve shankhan'ın biraz daha puana ihtiyacı olduğu için shankhan'ın cevabını kabul ediyorum ;-)

— Zardoz

7

Bazı açıklamalar ve / veya belgeler harika bir katkı olacaktır.

— showdev

26

position: relativeDış bölüm için ne dersiniz ? İçini gizleyen örnekte. Üst veya sol belirtmediğiniz için düzeninde de hareket ettirmez.

— Tesserex
kaynak

9

Mutlak olarak konumlandırılmış bir öğe, aslında bir relativeebeveyne veya bulunan en yakın akraba ebeveyne göre konumlandırılır . Yani öğesi, öğeler overflow: hiddenarasında relativeve absolutekonumlandırılmış öğeler arasında olmalıdır :

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

— Si7ius
kaynak

-3

Sadece divböyle yapıyorsun :

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

Umarım bu kod size yardımcı olur :)

— rochano
kaynak