Çocuğu bir taşmanın dışında görünür yap: gizli üst

100

CSS'de, overflow:hiddenyüzen alt öğelerinin yüksekliğiyle genişlemesine izin vermek için üst kapsayıcılarda ayarlanır.

Ama aynı zamanda bir başka ilginç özelliği de var margin: auto...

ÖNCEKİ kardeş yüzen bir öğe ise, aslında ona bitişik görünecektir. Diğer bir deyişle, eğer kardeş ise float:left, kap float:none overflow:hiddenkardeşin sağında görünecektir, satırsonu yok - normal akışta yüzüyormuş gibi. Önceki kardeş ise float:right, kap kardeşin solunda görünecektir. Bu kapsayıcıyı yeniden boyutlandırmak, onu yüzen öğeler arasında ortalanmış olarak gösterecektir. Eğer önceki iki kardeş, bir varsa Say float:leftdiğer float:right, konteyner iki İnbetween merkezli olarak görünür.

İşte sorun şu ...

Çocukları maskelemeden bu tür düzeni nasıl koruyabilirim?

Web'in her yerinde gezinmek bana clear:bothbir kapsayıcıyı nasıl genişleteceğime ve genişleteceğime dair yollar veriyor ... ancak sol / sağ önceki çocuk ortalamasını sürdürmek için herhangi bir alternatif çözüm bulamıyorum. Konteyneri yaparsanız overflow:visible, kap aniden yüzen öğelerin düzen akışını yok sayar ve yüzen öğenin üzerinde katmanlı olarak görünür.

Öyleyse soru :

overflow:hiddenDüzeni korumak için konteynere sahip olmalıyım ...

çocukların maskelenmemesi için bunu nasıl yapabilirim? Çocuğun, kabın dışındaki ebeveyne göre kesinlikle konumlandırılmasına ihtiyacım var.

VEYA

overflow:visibleBir çocuğu kapsayıcının dışındaki ebeveyne göre kesinlikle konumlandırabilmem için nasıl ... HENÜZ kardeş float-like-layout-flow'u koru?

— Marknadal
kaynak

86

Sen kullanabilirsiniz clearfix"düzen koruyarak" yapmak için aynı şekilde overflow: hiddenyapar.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

class="clearfix"ebeveyne sınıf ekleyin ve kaldırınoverflow: hidden;

— Frexuz
kaynak

Hmm! Zekice, ben şimdi onunla deney yapıyorum. Şu anda elde ettiğim şey, oluşturulan içeriğin doğru şekilde davrandığı, düzen akışında korunduğu, ancak ana öğenin onu ve kayan öğelerin üstündeki katmanı yine de görmezden geleceği. Ancak, bu çok iyi bir fikir ve onun doğru davranmasını sağlayıp sağlayamayacağımı görmek için daha çok oynayacağım ve oy vermek için geri döneceğim. Teşekkür ederim :).

— marknadal

@ user1671639, örneğiniz bir düzeltme için gerçekten geçerli değil. Başka bir şeye ihtiyacınız var, bu yüzden sorununuzla ilgili bir soru göndermenizi öneririm.

— Frexuz

Bu hiç de aynı şekilde çalışmıyor overflow:hidden. Üst div öğesine bir düzeltme eki uygulamak, tüm alt bileşenlerin üst öğeyle aynı yükseklikte "yer almasına" izin vermez.

— Khom Nazid

11

Gönderilen cevapların hiçbiri benim için işe yaramadı. Alt position: absoluteöğe için ayar ancak işe yaradı.

— refleksiv
kaynak

18

Ancak üst DIV, üst DIV'nin sınırlarının ötesine geçerse (taşması: gizli) bunu maskelemez mi?

— marknadal

9

Afaik, ebeveynin konumu olmadığı sürece: göreceli. Daha sonra alt öğe, onu normal (ebeveynin) dom akışından çıkararak ilk konumlandırılmış (statik olmayan) üst öğeye göre konumlandırılır.

— Pim Schaaf

Ebeveynin konumu: göreli varsa ve bunu gerektirmiyorsa, konumlandırabilirsiniz: ayarlanmamış.

— yeahlad

Doğru, eğer ebeveynin dışındaki birposition: fixed şeye göre konumlanmışsa veya mutlak konumlanmışsa , görünür olacaktır. Bununla birlikte, kod değişikliklerine karşı daha sağlam olması için genellikle onu ebeveyne göre konumlandırmanız gerekir (istersiniz). O halde bu çözümler alternatif değildir. visibility: hidden

— ArneHugo

10

Bu eski bir soru ama kendimle karşılaştım.

Önceki soru için durumsal olarak çalışan yarı çözümlerim var ("Taşmada görünen çocuklar: gizli ebeveyn")

Üst div'in position: relative olması gerekmiyorsa, alt stillerini görünürlük: görünür olarak ayarlamanız yeterlidir.

Üst div'in konum: göreli olması gerekiyorsa, çocukları göstermenin mümkün olan tek yolu konum: sabitti. Bu benim durumumda şanslı bir şekilde benim için çalıştı ama başkalarında işe yaramayacağını düşünürdüm.

İşte berbat bir örnek, görüntülemek için bir html dosyasına gönder.

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

— Thomas Davis
kaynak

İşte berbat bir örnek, görüntülemek için bir html dosyasına gönder. <code> <div style = "background: # ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;"> <div style = "background: # ff0000; position: fixed; top: 10px; left : 10px; "> asd <div style =" background: # 00ffff; width: 200px; overflow: visible; position: mutlak; görünürlük: visible; açık: her ikisi; yükseklik: 1000px; üst: 100px; sol: 10px; "> a </div> </div> </div> </code>

— Thomas Davis

4

Sabit pozisyon otomatik görüntü alanına eleman pozisyonu görecelidir, çünkü cevap çalıştıkları için teşekkürler, ama bu o mu yani çalışmıyor değil ebeveyn ile hareket eder. Aslında, kayan bir sayfanız varsa, siz kaydırdıkça 10px, 10px olarak kalacaktır.

— marknadal

"Üst div'in konum: göreceli olması gerekiyorsa, çocukları göstermenin olası tek yolu konumdu: sabit." Bunun için teşekkürler. Ebeveynin taşmasına rağmen taşması gereken bir açılır pencere yardım balonum vardı: kaydırma. Göreli bir iç ve ardından sabit bir içerik alanına sahip mutlak bir div elde ettim.

— JackMorrissey

Teşekkürler, bu benim için çalıştı. Konumla ilgili bir ebeveynim vardı ve bu gerekliydi çünkü konumu kullanılarak ayarlandı left. margin-leftBunun yerine kullanmak aynı etkiyi sağlar, bu yüzden artık göreceli konumu kullanmam gerekmiyordu.

— Felipe Castro

1

Diğerleri için, clearfix bunu sizin için çözmezse, kayan kardeşe kayan kardeşlerin genişliğiyle aynı olan / olan kenar boşluklarını ekleyin.

— Walf
kaynak