css溢出隐藏不符合z-index的规则

Question

我有一个关于div位置的问题。

我创建了这个DEMO。如果你点击演示，你可以看到有3张图片。当您将鼠标悬停在图像上时，气泡div将打开。但它并没有显示我在外面。

.bubble 
{
    position: absolute;
    width: 345px;
    height: auto;
    padding: 3px;
    background: #FFFFFF;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: #d8dbdf solid 1px;
    -webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
    -moz-box-shadow:    -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
    box-shadow:         -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
    display:none;
    margin-left:-345px;
}
.bubble:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent #fff;
    display: block;
    width: 0;
    z-index: 1;
    right: -10px;
    top: 16px;
}

Answer 1

问题是溢出隐藏不符合Z-index的规则。框外任何隐藏的内容都被认为是文档外的内容。你需要找到一种满足你能力的方法。

子元素不能显示在父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;
}

<div id="members-div">
  <ul id="members-bio">
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=product">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=product">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=product">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=product">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=product">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=product">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=product">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=product">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=product">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=product">
      </figure>
    </li>
  </ul>
  <div class="member-details">
    <p>Product name</p>
    <p>Product details</p>
    <p>buy now</p>
  </div>
</div>

Answer 2

如果我理解正确，您的气泡必须放置在带有"溢出：隐藏"的块外部，并相对图像定位。带有class="sinevis"的块有style="overflow：hidden；"，它只会切断你的气泡。

Answer 3

隐藏的溢出实际上是你的问题。。。您需要设置要在溢出隐藏的元素的悬停外侧显示的项目。

问题是隐藏的溢出不符合Z索引的规则。框外任何隐藏的内容都被认为是文档外的内容。你需要找到一种满足你能力的方法。

遗憾的是，你有很多div要经历，所以我不100%愿意向你展示我将如何做到这一点，但这是一个简单的概念。如果你把一个元素设置为displaynone，并给它一个id，在其中使用html的替换，然后使用鼠标的偏移量，你可以做到100%没有问题。然后元素会在溢出框的外面，你可以在它上面看到它。

Answer 4

将悬停容器放在溢出的盒子外面。使用css中的：first child，：last child您将知道鼠标在哪个元素上，因此，U将能够添加适当的框位置。