隐藏的css溢出不符合z-index的规则
我有一个关于div职位的问题。
我创造了这个DEMO 。 如果单击演示，则可以看到有3个图像。 当您将鼠标hover在图像上时，将打开bubble 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; } 问题是隐藏的溢出不符合Z-index的规则。 隐藏的框外部的任何内容都假定在文档之外。 你需要找到一种方法来满足你的能力。
子元素无法显示父overflow:hidden一面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; }
-
-
-
-
-
-
-
-
-
-
Product name
Product details
buy now
隐藏溢出实际上是您的问题…您需要设置要在隐藏溢出的元素的hoverOUTSIDE上显示的项目。
问题是隐藏的溢出不符合Z-index的规则。 隐藏的框外部的任何内容都假定在文档之外。 你需要找到一种方法来满足你的能力。
可悲的是，你有很多div需要经历，所以我不是100％愿意向你展示我将如何做到这一点，但这是一个简单的概念。 如果你基本上设置一个元素作为显示没有在框外，并给它一个id使用替换html，然后使用鼠标偏移你可以100％没有问题。 然后该元素将在溢出盒外面进行回合，您将能够在它上方看到它。
如果我理解正确，你的气泡必须放在块外“溢出：隐藏”并定位相对图像。 使用class =“sinevis”的块有style =“overflow：hidden;” 它只是切断了你的泡沫。
把那个hover容器放在盒子外面溢出。 使用：first-child，：css中的last-child你将知道鼠标是什么元素，所以，U将能够添加适当的盒子位置。