Hi All, Im having a bit of a problem with getting Z-Index to work properly.

As i understand it, any element, so long as it positioned can have a z-index value applied to it, the bigger the number, the closer to user it will appear.

In my scenario i have a table, and every cell contains one a div:

    #vt-table tbody td div.f_input
    height: 22px;
    margin-top: 1px;
    margin-left: 2px;
    z-index: 0;
    position: relative;
    border: 1px solid #aaa;
    width: 55px;
    background-color: #f0f0f0;

and then i have a secondary div inside this, that is made visible by javascript when the parent div is hovered over:

    position: absolute;
    width: 100px;
    height: 100px;
    right: -102px;
    top: 0px;
    display: none;
    background-color: #fff;
    border: 1px solid #333;
    z-index: 25;

This has the effect of making the popout div appear to the right of the parent div, however, it always appears behind any adjacent .f_input divs. No other elements have a z-index applied to them. Can anyone tell me where im going wrong?


2 answers


There is a problem in some browsers with z-index:0; try starting at 1.

Also here is a great CSS tooltip that hovers over the content by default, without the need for Javascript that's activated onhover. :)

Answered about 9 years ago by Kyle Sevenoaks

z-index of the parent can also affect the z-index of the child, so your table should have a positive z-index, and the children should have different, more positive z-indexes, my vague understanding is that if z-index is the same then source order will affect the rendering on the same layer, so if your adjacent divs have the same index, but appear earlier in the source they will appear nearer to the user than those that appear later.

give every div a different order, make sure they don't overlap.

Answered about 9 years ago by Tony Crockford