How do I get a div that appears on hover to overlap all others, without using absolute positioning?

Question

I feel like this should be simple and is something I see all the time, but I'm struggling. I'm working on a pop up info box that works on hover. Problem is, no matter what I do, the images and text in the next div overlap my pop-up. Z-index doesn't work, I assume because my elements are not (and can't be) absolutely positioned. I need to use this pop up class for all of the images (so no absolute values) and the layout is fluid and will break if I use any absolute positioning at all.

So how do I get these to overlap properly? My html and css are below.

Edit: Here's a link to a screenshot of what I'm seeing: http://imgur.com/M7TdPdX I just need that bubble to be in front of Peter's picture and info.

THanks!

 <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

First, try adding a couple more 9's to your z-index. Just kidding, that won't work because pseudo-elements like :hover create a new stacking index. As a result, no solution involving z-index will work, which is almost invariably the case.

The solution here actually is absolute positioning. If you set .circle-pic to position: relative and .infohover to position: absolute, the hidden section will be positioned relative to the parent with no impact on the rest of the page.

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

Happy to help further if this doesn't solve the problem -- not quite sure I understood what was wrong originally.

.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 is a pain. Without actually seeing a working demo, try this change:

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

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

Whichever .circle-pic your are hovering on will place it above the others.