I have spent the past two days working on this particular issue.
Example:
It's a rather complex design, so to avoid pasting a lot of code here, I recreated the main structure on this jsfiddle and included the simplified code at the end of this post:
http://jsfiddle.net/rwone/zwxpG/10/
Scenario:
I have a container with multiple <li> elements that contain a div (with dynamic content from a database) initially set to display: none.
When hovering over an image in these <li> elements, I want to display the div.
It is functioning, however, the div seems to be positioned behind other elements in the container which has a fixed height and overflow-y: auto.
What I've Tried:
I have experimented with different z-index values and absolute/relative positioning, but I have not yet found a solution.
I identified two potential causes in the code below and the jsfiddle (indicated as /* comments */), but these solutions do not work on the live test site.
Question:
My question is, is there another approach to ensure that the hover state div appears on top of and outside the enclosing container? It's frustrating that I can resolve these issues in the jsfiddle but not on the live site. Is there a different way to tackle this problem?
Thank you.
HTML:
<div id="wrapper">
<div id="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<ul>
<li>
hover me #1
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
<li>
hover me #2
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
</ul>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
CSS:
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 50px;
/* cause one - on its own, this causes the undesired 'underneath' effect */
overflow-y: auto;
}
ul li {
display: inline;
/* cause two - on its own, this causes the undesired 'underneath' effect */
position: relative;
}
#container_c {
display: none;
}
ul li:hover #container_c {
background: #00AFF0;
display: block;
width: 200px;
height: 200px;
position:absolute;
top: -20px;
left: 50px;
z-index: 999;
overflow: hidden;
}
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
Update:
In response to the answer below, here is more information regarding the actual content displayed upon hover (inside the #container_c div). Each <li> has its unique content:
<li class=".class1 .class2">
<img src="http://path/to/image.jpg">
<div id="container_c">
<h4>title</h4>
<div id="container_c_left">
<span id="cl1">text</span>
<span id="cl2">text</span>
<span id="cl3">text</span>
</div>
<div id="container_c_right">
<span id="cr1">text</span>
<span id="cr2">text</span>
</div>
<span id="cc1">text</span>
<span id="cc2"><a class= "linkclass" href="http://path/to/link.html">link</a></span>
</div>
</li>