私はこれを約2日間調べてきました。
例
これはかなり複雑な設計なので、ここに貼り付けるコードを減らすために、この jsfiddle のメイン構造を再作成し、この記事の最後に簡略化されたコードを含めました。
http://jsfiddle.net/rwone/zwxpG/10/
シナリオ
<li>最初にプロパティdisplay: noneを持つdiv(データベースからの動的コンテンツを含む)を含む 多数のコンテナがあります。
ただし、これら<li>の画像にカーソルを合わせると、div が表示されます。
それは機能していますが、div はコンテナー内の他の要素の下にあるように見えます。
私が試したこと
z-index と絶対および相対位置の組み合わせを試しましたが、まだ解決策を見つけることができませんでした。
以下のコードとjsfiddle（ として表示/* comments */）で2つの原因を特定しましたが、これらはライブテストサイトでは機能しません。
質問
したがって、私の質問は、ホバー状態の div がそれを囲んでいるコンテナーの上と外側に表示されるようにする別の方法はありますか?
これらの問題をライブサイトではなくjsfiddleで修正できるのは理想的な解決策ではありませんが、これに完全にアプローチする別の方法があるかどうか尋ねたいと思いましたか?
ありがとうございました。
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;
}
アップデート
以下の回答に応じて、ホバー時に表示されている実際のコンテンツ ( #container_cdiv 内のすべて) に関する詳細情報を次に示します。それぞれ<li>に独自のコンテンツがあります。
<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>