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

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

我不太清楚你的意思是什么？从未听说过重叠：隐藏，我听说过溢出，但问题是你想显示整个 .member 类而不被滑块切断？

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