编程语言
首页 > 编程语言> > javascript – 为什么我的z-index不起作用？

javascript – 为什么我的z-index不起作用？

作者：互联网

我正在尝试创建一个悬停菜单,但它不起作用.我创建一个菜单并使用高z-index值设置它.然后我使用javascript生成一个表,但随后我向下滚动表格在菜单按钮前面.

编辑：

我只是想让它为FF8工作.

编辑2：

这段代码实际上可行.为了使我的按钮显示在顶部,我只需将我的表z-index设置为-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>

解决方法:

myTable有位置：绝对; – 总会找到位置的东西：静态;

z-index将起作用,但两个元素(表和菜单都必须具有z-index和position：absolute;

标签：javascript,css,z-index,html
来源： https://codeday.me/bug/20190613/1235168.html