PDA

View Full Version : CSS Z-Index Tooltip Question



theflyingminstr
Sep 29th, 2009, 10:49 PM
Hi I'm still not always 100% with the z-index property.. I have a tooltip that keeps hiding behind a div set for some reason.

The Tooltip's z-index is set to 100 so I'm not sure why this is the case..

Tooltip:


<style>
#dhtmltooltip{
position: absolute;
left: -300px;
width: 190px;
border: 1px solid black;
padding: 2px;
background-color: white;
visibility: hidden;
z-index: 100;
font-family:Verdana;
font-size:12px;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
</style>

<div id="dhtmltooltip"></div>


Div Set:


<style>
.Block
{
position:relative;
z-index:0;
margin:0 auto;
min-width:3px;
min-height:3px;
}

.Block-body
{
position: relative;
z-index:1;
padding: 2px;
}

.Block-tr, .Block-tl, .Block-br, .Block-bl, .Block-tc, .Block-bc,.Block-cr, .Block-cl
{
position:absolute;
z-index:-1;
}

.Block-tr, .Block-tl, .Block-br, .Block-bl
{
width: 2px;
height: 2px;
background-image: url('../images/Block-s.png');
}

</style>


<div class="Block">
<div class="Block-tl"></div>
<div class="Block-tr"></div>
<div class="Block-bl"></div>
<div class="Block-br"></div>
<div class="Block-tc"></div>
<div class="Block-bc"></div>

<div class="Block-cl"></div>
<div class="Block-cr"></div>
<div class="Block-cc"></div>
<div class="Block-body">

<div class="BlockHeader">
<div class="l"></div>
<div class="r"></div>
<div class="header-tag-icon">
<div class="t">

Title</div>
</div>
</div>
<div class="BlockContent">
<div class="BlockContent-body">

Div Contents

</div>
</div>
</div>

Thanks