CSS taşma-y: görünür, taşma-x: kaydırma

Question

Aramamda bunun gibi birkaç soru gördüm, ancak soru doğru cevaplanmadı ya da yanıt verilmedi. Yani, tekrar soracağım.

<style> 
.parent { overflow-y:scroll; overflow-x:visible; width:100px; } 
.child { position:relative; } 
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; } 
</style> 

    <div class="parent"> 
    <!-- Lots of the following divs --> 
    <div class="child"> 
    Text Line 
    <div class="child-menu">some pop out stuff</div> 
    </div> 
</div> 

Tamam, bu sadece bir örnektir. Ama temel olarak, başarmaya çalıştığım şey .child sınıflarının y ekseninde kaydırılabilir olması ... yukarı ve aşağı kaydırma. Ama x eksenini istiyorum .... çocuk menüsünün .parent kapsayıcısının dışında görünmesi.

Bu mantıklı mı? Öyleyse, sayfa ortaya çıktığında tarayıcı, taşmayı otomatik olarak tamamen otomatik olarak algılıyor ve ayrı eksene saygı göstermiyor. Yanlış bir şey mi yapıyorum yoksa tarayıcılar bu konuda henüz CSS3 özelliklerine sahip değiller mi? Çoğunlukla sadece Chrome'da test edildi.

Answer 1

Bunu çözdüm!

Üst öğe taşma olmalıdır: auto; .child şu konumda olmalıdır: göreli; .child menüsü şu konumda olmalıdır: sabit; NO üst veya sol konumlandırma ile. Bunu yaparsanız, içeriği içeriğiyle koruyacaktır.

Çocuk menüsünü hareket ettirmeniz gerekiyorsa, kenar boşluklarını kullanın ve üstte veya solda değil. Örnek kenar boşluğu: -100px;

Answer 2

Burada çözüldü! CSS ve JS kullanıyorlar. Kaydırma yaptığınızda

.child:hover .child-menu { display: block; } 

.parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px } 
    .child { position:static; } 
    .child-menu { position:absolute; display:inline-block; display: none; } 

https://css-tricks.com/popping-hidden-overflow/

https://jsfiddle.net/68fBE/2/