Display div in front of everything else? - html

Question

Afternoon.
I am creating objects on an HTML page that display a tool-tip when you hover over the object.
I can't seem to get the tool tips to hover in front of all the objects. It only seems to sit in front of the one it relates too.
Below is an example:
.red
{
height: 75px;width: 75px;
background: red;
position: absolute;z-index: 1;
}
#red_tip
{
display: none;
}
.red:hover #red_tip
{
display: block;
background: blue;
position: absolute; z-index:2;
top:50px; left:50px;
width: 100px;
}
.green
{
height: 75px;width: 75px;
background: green;
position: absolute; z-index: 1;
top: 75px;
}
#green_tip
{
display: none;
}
.green:hover #green_tip
{
display: block;
background: blue;
position: absolute; z-index:2;
top:50px; left:50px;
width: 100px;
}
<div class="red">Red
<div id="red_tip">A tip for red goes here</div>
</div>
<div class="green">Green
<div id="green_tip">A tip for green goes here</div>
</div>
If you hover over the red box, you will see the tip sits behind the green box, I need it in front.
Many thanks,
Michael.

Answer 1

As long as the red and green divs have the same z-index, any higher z-indices within them don't actually make any difference. So you could simply give the red div a higher z-index than the green—as long as this order will reliably remain the same.
There's some useful info on z-index stacking contexts here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

Answer 2

just make green dive position to relative and z-index to -1
.red
{
height: 75px;width: 75px;
background: red;
position: absolute;z-index: 1;
}
#red_tip
{
display: none;
}
.red:hover #red_tip
{
display: block;
background: blue;
position: absolute; z-index:15;
top:50px; left:50px;
width: 100px;
}
.green
{
height: 75px;width: 75px;
background: green;
position: relative; z-index:-1;
top: 75px;
}
#green_tip
{
display: none;
}
.green:hover #green_tip
{
display: block;
background: blue;
position: absolute; z-index:2;
top:50px; left:50px;
width: 100px;
}

Answer 3

That's a tricky one. in the .red style, set its z-index: 2;.
.red
{
height: 75px;width: 75px;
background: red;
position: absolute;z-index: 2;
}

Answer 4

Removing the z-index from .red and .green should fix your issue. Additionally, you should set the body's margin to 0. This will help prevent the those two divs from overlapping as they currently do.
body {
margin: 0;
}
.red {
height: 75px;
width: 75px;
background: red;
position: absolute;
}
#red_tip {
display: none;
}
.red:hover #red_tip {
display: block;
background: blue;
position: absolute; z-index:2;
top:50px; left:50px;
width: 100px;
}
.green {
height: 75px;
width: 75px;
background: green;
position: absolute;
top: 75px;
}
#green_tip {
display: none;
}
.green:hover #green_tip {
display: block;
background: blue;
position: absolute; z-index:2;
top:50px; left:50px;
width: 100px;
}

Answer 5

You can also simplify it by wrapping your class like so and then all you have to do is call the class tooltips.
a.tooltips {
position: relative;
display: inline;
margin:50px 0 0 50px;
top:50px;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
Then call it doing something like so
<a class="tooltips" href="#">CSS Tooltips
<span>Tooltip</span></a>

Answer 6

Check if you have any <div> not closed.