我如何得到一个div，出现在悬停重叠所有其他，而不使用绝对定位

Question

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

那么我如何让它们正确地重叠呢?我的html和css如下:

编辑:这里有一个链接到我所看到的截图:https://i.stack.imgur.com/Aroam.jpg我只需要在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这样的伪元素会创建一个新的堆叠索引。因此，没有任何涉及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上，它都将位于其他圆圈的上方。