Question

i’ve been going over this one for about two days.

example

it’s a fairly complicated design, so to reduce code pasted here i’ve 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 numerous <li>‘s containing a div (containing dynamic content from a database) that initially has the property display: none.

on hovering over an image in these <li>‘s however, i wish to show the div.

it is working, however the div appears to be beneath other elements in the container which has a fixed height and overflow-y: auto.

what i’ve tried

i have tried combinations of z-index’s and absolute and relative positioning, but i haven’t been able to find a solution yet.

i’ve isolated two causes in the code below and the jsfiddle (shown as /* comments */) but these do not work on the live test site.

question

my question is therefore, is there another way to enforce that the hover state div is shown on top of and outside of the container that is enclosing it?

it is not an ideal solution that i can fix these issues in the jsfiddle but not the live site, but i just thought i’d ask if there was another way to approach this altogether?

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 answer below, here is further information on the actual content that is being displayed upon hover (everything within the #container_c div). each <li> has its own 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>

Answer 1

the solution was a mixture of @NoPyGod’s jquery suggestion and to have a better understanding of how absolute and relative positioning work.

basically, when absolute and relative positioning are applied to a div, this position is relative to the position of the last element that had absolute or relative positioning defined and is a ‘container’ of the div you are working with.

to escape from the ‘container’ that had overflow: auto and a fixed height and width, i had to remove erroneous positioning back till a parent div that was not constrained by overflow and height and width restraints that were impacting on the hover state div.

a working jsfiddle is here:

http://jsfiddle.net/rwone/eeaAr/

i also implemented @Deepak Kamat’s suggestion to only have one id per page and change the rest of the div’s to be identified by classes.

i subsequently read the article below that made more sense to me this time and after working in this context:

http://css-tricks.com/the-difference-between-id-and-class/

thank you to all for your assistance!

html

<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
some amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
more amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
even more amazing html
</div>
</div>
</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: 100px;
overflow-y: auto;
}

.hidden_db_data_div {
display: none;
background: #00AFF0;
width: 120px;
height: 150px;
color: red;
position:absolute;
overflow: hidden; 
z-index: 999;  
}

img {
width: 50px;
height: 50px;
}

.magic {
display: inline;
}

#container_a { position:relative; }

#hbar_three {
background: #cccccc;   
height: 50px;
}

#hbar_four {
background: #000000;   
height: 50px;
}

script

$(".magic").hover(
function () {
$(this)
.find('.hidden_db_data_div')
.css({'left':$(this).position().left+20 + "px", 'top':'-20px'})
.fadeIn(200);
},
function() { 
$(this)
.find('.hidden_db_data_div')
.fadeOut(100);
}                
);