CODEWITHSUNDEEP
htmlcss
Michael Carn-Bennett
Michael Carn-Bennett

Reputation: 311

Display div in front of everything else?

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.

Upvotes: 2

Views: 20232

Answers (6)

Nejmeddine Kh&#233;chine
Nejmeddine Kh&#233;chine

Reputation: 19

Check if you have any <div> not closed.

Upvotes: 0

jfulton
jfulton

Reputation: 77

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>

Upvotes: 0

David Zulaica
David Zulaica

Reputation: 388

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;  
    }

Upvotes: 0

EduardoFernandes
EduardoFernandes

Reputation: 3449

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;
 }

Upvotes: 0

ralph.m
ralph.m

Reputation: 14365

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.

Upvotes: 1

Adnan j
Adnan j

Reputation: 119

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;  
}

Upvotes: 0

Related Questions