如何在不使用绝对定位的情况下让悬停时出现的 div 与所有其他 div 重叠？

Question

我觉得这应该很简单，并且是我一直看到的东西，但我很挣扎。我正在研究一个可以悬停的弹出信息框。问题是，无论我做什么，下一个 div 中的图像和文本都会与我的弹出窗口重叠。 Z-index 不起作用，我认为是因为我的元素没有（也不能）绝对定位。我需要为所有图像使用这个弹出类（所以没有绝对值），并且布局是流畅的，如果我使用任何绝对定位，布局就会中断。

那么如何让它们正确重叠？我的html和css如下。

编辑：这是我所看到的屏幕截图的链接：http://imgur.com/M7TdPdX 我只需要在 Peter 的图片和信息前面显示气泡即可。

谢谢！

 <div class="meet-section">



<h1 style="display: block; border-bottom: 7px solid #720045; font-weight: 600; font-size: 2em; margin-bottom: 30px;">Management</h1>
    <div class="circle-pic">
        <h1 class="employee">Elisabeth</h1>
            <a href="http://plumdirectmarketing.com/wp-content/uploads/2014/03/liz_appointment.png"><img src="http://www.plumdm.com/test/wp-content/uploads/2013/12/liz-small.png" onmouseover="this.src='http://www.plumdm.com/test/wp-content/uploads/2014/02/liz-small-ring.png'" onmouseout="this.src='http://www.plumdm.com/test/wp-content/uploads/2013/12/liz-small.png'" /></a>
        <h2 class="position">Head of Sales</h2>
<p>877-781-9962</p>
<div class="infohover">
<img src="http://plumdirectmarketing.com/wp-content/uploads/2014/03/elisabeth_popup_name.png"><br>
This is a test!</div>
    </div>

    <div class="circle-pic">
        <h1 class="employee">Peter</h1>
            <a href="http://www.plumdm.com/test/wp-content/uploads/2014/01/peter-large.png"><img src="http://www.plumdm.com/test/wp-content/uploads/2013/12/peter-small.png" onmouseover="this.src='http://www.plumdm.com/test/wp-content/uploads/2014/02/peter-small-ring.png'" onmouseout="this.src='http://www.plumdm.com/test/wp-content/uploads/2013/12/peter-small.png'" /></a>
        <h2 class="position">Head of Operations<br>
800-992-9663</h2>
    </div>
    </div>

CSS：

.infohover {
display: none;
background-image:url('/wp-content/uploads/2014/03/popup_bg_bubble.png');
background-repeat: no-repeat;
font-family: "proxima-nova";
font-size: 16pt;
color: #8d0057;
height: 350px;
width: 640px;
padding: 20px;
padding-left: 50px;
z-index: 999;
margin-left: 350px;
margin-top: -380px;
text-align: left;
}

a:hover~.infohover {
display: block;
}

.circle-pic {
z-index: -1;
}

.meet-section {
z-index: -1;
}

Answer 1

首先，尝试在 z-index 中再添加几个 9。开个玩笑，这是行不通的，因为像:hover 这样的伪元素会创建一个新的stacking index。因此，涉及z-index 的任何解决方案都不起作用，几乎总是如此。

这里的解决方案其实是绝对定位。如果将.circle-pic 设置为position: relative 并将.infohover 设置为position: absolute，则隐藏部分将相对于父部分定位，而不会影响页面的其余部分。

http://jsfiddle.net/qb4at/2/

如果这不能解决问题，我们很乐意提供进一步的帮助 -- 我不太确定我最初理解了什么问题。

.infohover {
  display: none;
  background-image:url('/wp-content/uploads/2014/03/popup_bg_bubble.png');
  background-repeat: no-repeat;
  font-family: "proxima-nova";
  font-size: 16pt;
  color: #8d0057;
  height: 350px;
  width: 640px;
  padding: 20px;
  padding-left: 50px;
  /* z-index: 999; */
  /* margin-left: 350px; */
  /* margin-top: -380px; */
  text-align: left;

  position: absolute;
  top: 0;
  left: 350px;
}

a:hover~.infohover {
  display: block;
}

.circle-pic {
  position: relative;
  /* z-index: -1; */
}

.meet-section {
  /* z-index: -1; */
}

Answer 2

z-index 很痛苦。如果没有实际看到工作演示，请尝试以下更改：

.circle-pic {
z-index: 1;
}

.circle-pic:hover {
z-index: 2;
}

无论您悬停在哪个 .circle-pic 上，都会将其置于其他 .circle-pic 之上。