css overflow hidden does not conform to the rules of z-index

问题

I have one problem about div positions.

I have created this DEMO. If you click the demo you can see there are 3 image. When you mause hover over the image then bubble div will open. but it is not shows me outside.

.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;
}

回答1:

Problem is that overflow hidden does not conform to the rules of Z-index. ANYTHING outside of the box that is hidden is assumed to be outside of the document. You need to find a way that satisfies your ability to do that.

Child element can't show out side of the parent 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>

回答2:

Overflow hidden actually is your problem... You need to set the items that you want to display on hover OUTSIDE of your element that is overflow hidden.

Sadly you have a lot of divs to go through so I am not 100% willing to show you exactly how I would do it, but it is a simple concept. If you set essentially a element as display none outside of the box and give it an id use a replace of html in it and then use offset of mouse you can do it 100% no problems. The element would then bout outside of the overflow box and you'll be able to see it above it.

回答3:

If I understand you correctly, your bubble must be placed outside the block with "overflow: hidden" and be positioned relative image. Block with class="sinevis" have style="overflow: hidden;" and it just cut off your bubble.

回答4:

Put that hover container outside the box with overflow. With :first-child,:last-child in css You will know on what element mouse is over so ,U will be able to add apropriate box position.

来源：https://stackoverflow.com/questions/26607492/css-overflow-hidden-does-not-conform-to-the-rules-of-z-index

标签

jquery

css

z-index