Q:

Why is my z-index not working?

I am trying to create a hovering menu, but it doesn't work. I create a menu and set it with a high z-index value. I then generate a table using javascript, but then I scroll down the table goes in front of my menu buttons.
Edit:
I am just trying to get this to work for FF8.
Edit 2:
This code will actually work. In order to make my buttons appear on top I just set my table z-index to -1;
    
    #blackHead 
    {
        width:100%;
        background-color:White;
    }
    #table
    {
        position:relative;
        width: 40%;
        left: 30%;
        z-index: -1;
    }

    #header
    {
        position: fixed;
        top:3%;
        left:30%;
        width:40%;
        z-index: 100;

    }
    .inv 
    {
        visibility:hidden;
        width:30px;
    }
    .headerButton
    {
        text-decoration:none;
        position:relative;
        font-family:Arial;
        font-weight:bold;
        color:White;
        border: solid 1px  black;
        background-color: Black;
        border-radius: 5px;
        padding: 5px;
        z-index: 101;
    }
    .headerButton:hover
    {
        background-color: White;
        color: Black;
    }
    #myTable {
        position: absolute;
        top:10%;
    }

    #button1
    {
        position: absolute;
        top:0%;
        left:0%;

    }   
    #button2
    {
        position: absolute;
        top:0%;
        right:0%;
    }

    #button3
    {
        position: absolute;
        top:0%;
        left:50%;
    }
    #button4
    {
        position: absolute;
        top:10%;
        left:50%;
    }
    #button5
    {
        position: absolute;
        top:10%;
        right:0%;
    }
</style>

<html>

<head>
<title>Table</title>    

</head>

<body>
<div id="header" class="headerBar">
    <a href=# id="create_table" class="headerButton" onclick="create_table()">Create Table</a>
    <span class="inv">" "</span>
    <a href=# id="update_table" class="headerButton" onclick="update_table()">Update Table</a>
    <span class="inv">" "</span>
    <a href=# id="quit" class="headerButton" onclick="quit()">Quit</a>
    <span class="inv">" "</span>
    <a href=# id="Send_Json" class="headerButton" onclick="send_json()">Send Json</a>
    <span class="inv">" "</span>
    <a href=# id="A1" class="headerButton" onclick="start_timer()">Start Timer</a>
    <span class="inv">" "</span>
    <a href=# id="A2" class="headerButton" onclick="stop_timer()">Stop Timer</a>
</div>

</body>

</html>
<script type="text/javascript">
   function create_table() {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];

        // creates a <table> element and a <tbody> element
        var tbl = document.createElement("table");
        tbl.id = "table";
        var tblBody = document.createElement("tbody");
        tbl.style.zIndex = -1;
        // creating all cells
        var xmlDoc = getXML();
        var x = xmlDoc.getElementsByTagName("Registers");

        for (var i = 0; i < x.length; i++) {
            // creates a table row
            var row = document.createElement("tr");

            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var name = document.createElement("td");
            name.style.width = "80%";
            var nameText = document.createTextNode(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
            name.appendChild(nameText);
            row.appendChild(name);

            var number = document.createElement("td");
            number.style.width = "10%";
            var numberText = document.createTextNode(x[i].getElementsByTagName("number")[0].childNodes[0].nodeValue);
            number.appendChild(numberText);
            row.appendChild(number);

            var value = document.createElement("td");
            value.style.width = "10%";
            var valueText = document.createTextNode(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue);
            value.appendChild(valueText);
            row.appendChild(value);

            row.addEventListener("dblclick", modify_value, false);

            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
        tbl.style.position = "absolute";
        tbl.style.top = "30%";

    }

</script>

A:

myTable has position: absolute; - that will always go over something with position: static;
z-index will work, but both elements (the table and the menu have to both have z-index and position: absolute; 

A:

Without seeing the HTML it's pretty hard to detect the problem.
Example
Here's a fiddle describing the problem: http://jsfiddle.net/rZysU/
.a1's z-index is set to 1000 but it still is not visible. b1 is visible although its z-index is only 1. (it even is the same with -1)
In General
If you nest HTML elements then each nesting level creates its own z-index stack. If you set the z-index of an element inside a deeper node in the DOM tree then it might happen that although you've set the z-index to a high value it still will be underneath other elements that reside in a higher hierarchy level of the DOM.
Example:

div1

div1a

a (z-index= 100)
b (z-index= 101)
c (z-index= 102)

div1b

d (z-index= -1)
e (z-index= 1)

d will still be drawn on top of a as div1b is given a higher z-index because it is listed after div1a and HTML renderers draw one node after another and define z-indicies by that way if you don't provide it by your CSS definition.

