-1

I'm working with a embedded custom page used in a system the uses javascript to load html and display.

I have created a basic testing example to work out some bugs with two DIV elements. One is displayed with text and contains a mouse over and mouse out function call.

The functions are processed against the second div which should then be displayed to provide additional information.

When the second div is displayed though, it is being displayed behind the other elements in the page. I tried giving it a high z-index value thorough a css rule but it is still appearing behind other items.

Any suggestions appreciated.

Code:

So my CSS for the "hidden" div that i want to display onmouse...() is:

.description{ display:none; position:absolute; border:5px solid black; background-color: yellow; padding: 5px; z-index:10000;}

and my js. function is:

function ShowContent(d) { var dd = document.getElementById(d); dd.style.display = "block"; };
j08691
  • 204,283
  • 31
  • 260
  • 272
Adam Wetzel
  • 11
  • 1
  • 1
    Are you also including a [position property (relative/fixed/absolute)](http://www.w3.org/TR/CSS2/visuren.html#z-index) *in addition to z-index*? – Adrift Apr 29 '13 at 16:27
  • 1
    Post a complete code example please. – j08691 Apr 29 '13 at 16:43
  • So my CSS for the "hidden" div that i want to display onmouse...() is: .description{ display:none; position:absolute; border:5px solid black; background-color: yellow; padding: 5px; z-index:10000;} and my js. function is: function ShowContent(d) { var dd = document.getElementById(d); dd.style.display = "blokc"; }; – Adam Wetzel Apr 29 '13 at 17:02

1 Answers1

0

The vertical axis position of the element depends on several factors. One of them being the stack level value for a particular stack context (z-index)

To apply a z-index property your element must be positioned.

But its much more than that playing the game. Which are the display and position value of the surrounding elements, including the anestor of your div? May be you are applying a z-index value to an element participating in other stacking context ! And their display value? Are you using the default block values or is there an inline level box ? Are any floting element in the neighbourg ?

Show your HTML and css and I will give you a more precise answer.

Fico
  • 2,317
  • 18
  • 19