如何在隐藏的溢出中显示下拉宽度？

Question

在bxslider中使用溢出时，是否有任何解决方案显示下拉菜单？

实际上div有overflow:hidden来正确显示转盘。是否有人有想法来解决与Z该问题

.member{ 
    position: absolute; 
    top: 50px; 
    left: 50%; 

    width: 150px; 
    height: 250px; 
    margin-left: -75px; 
    background: red; 
    z-index: 9999; 
} 

http://jsfiddle.net/ZpzPG/

Answer 1

没有任何可能性，以显示子元素显示父overflow:hidden

$('#members-bio').bxSlider({ 
 
    slideWidth: 300, 
 
    minSlides: 2, 
 
    maxSlides: 2, 
 
    slideMargin: 10 
 
}); 
 
$(document).ready(function() { 
 
    $('figure').click(function() { 
 
    var memberDetails = $(".member-details"), 
 
     item = $(this), 
 
     listLeft = (item.offset().left) + 60; 
 
    memberDetails.offset({ 
 
     left: listLeft 
 
    }).addClass('active-member'); 
 
    }); 
 
});

figure { 
 
    margin: 0; 
 
} 
 
.member { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50%; 
 
    width: 150px; 
 
    height: 250px; 
 
    margin-left: -75px; 
 
    background: red; 
 
    z-index: 9999; 
 
} 
 
.member-details { 
 
    background-color: #fff; 
 
    border: 1px solid #333; 
 
    width: 140px; 
 
    position: absolute; 
 
    top: 150px; 
 
    opacity: 0; 
 
    display: none; 
 
} 
 
.active-member { 
 
    display: block; 
 
    opacity: 1; 
 
}

<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script> 
 
<div id="members-div"> 
 
    <ul id="members-bio"> 
 
    <li class="slide"> 
 
     <figure> 
 
     <img src="http://placehold.it/350x150&text=memerb1"> 
 
     </figure> 
 
    </li> 
 
    <li class="slide"> 
 
     <figure> 
 
     <img src="http://placehold.it/350x150&text=memerb2"> 
 
     </figure> 
 
    </li> 
 
    <li class="slide"> 
 
     <figure> 
 
     <img src="http://placehold.it/350x150&text=memerb3"> 
 
     </figure> 
 
    </li> 
 
    <li class="slide"> 
 
     <figure> 
 
     <img src="http://placehold.it/350x150&text=memerb4"> 
 
     </figure> 
 
    </li> 
 
    <li class="slide"> 
 
     <figure> 
 
     <img src="http://placehold.it/350x150&text=memerb5"> 
 
     </figure> 
 
    </li> 
 
    <li class="slide"> 
 
     <figure> 
 
     <img src="http://placehold.it/350x150&text=memerb6"> 
 
     </figure> 
 
    </li> 
 
    <li class="slide"> 
 
     <figure> 
 
     <img src="http://placehold.it/350x150&text=memerb7"> 
 
     </figure> 
 
    </li> 
 
    <li class="slide"> 
 
     <figure> 
 
     <img src="http://placehold.it/350x150&text=memerb8"> 
 
     </figure> 
 
    </li> 
 
    <li class="slide"> 
 
     <figure> 
 
     <img src="http://placehold.it/350x150&text=memerb9"> 
 
     </figure> 
 
    </li> 
 
    <li class="slide"> 
 
     <figure> 
 
     <img src="http://placehold.it/350x150&text=memerb10"> 
 
     </figure> 
 
    </li> 
 
    </ul> 
 
    <div class="member-details"> 
 
    <p>Yes here</p> 
 
    <p>is the</p> 
 
    <p>member details</p> 
 
    </div> 
 
</div>

Answer 2

IM不太清楚你的意思吗？从来没有听说过重叠：隐藏，我听说过溢出，但问题是你想展示整个.member类而不会被滑块切断？

在这种情况下，请关闭“顶部”Atribute，然后在您的HTML中将您的div.member放在图像上，它会自动放置它以便您可以看到所有数据？