Почему мой z-индекс не работает? - PullRequest
Новая
       2

Почему мой z-индекс не работает?

4 голосов
/ 22 ноября 2011

Я пытаюсь создать зависшее меню, но оно не работает. Я создаю меню и задаю ему высокое значение z-index. Затем я генерирую таблицу, используя javascript, но затем прокручиваю таблицу вниз перед кнопками меню.

Edit:

Я просто пытаюсь заставить это работать на 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>

Ответы [ 2 ]

5 голосов
/ 22 ноября 2011

myTable имеет position: absolute; - это всегда будет проходить через что-то с position: static;

z-index будет работать, но оба элемента (таблица и меню должны иметь z-index и position: absolute;

2 голосов
/ 22 ноября 2011

Не видя HTML, довольно трудно обнаружить проблему.

Пример

Вот скрипка, описывающая проблему: z-index http://jsfiddle.net/rZysU/

.a1 равенустановить на 1000, но он все еще не виден.b1 виден, хотя его z-индекс равен только 1. (он даже равен -1)

В общем

Если вы вкладываете HTML-элементы, то каждый уровень вложенности создает свой собственный z-стек индекса.Если вы установите z-индекс элемента внутри более глубокого узла в дереве DOM, то может случиться так, что, хотя вы установили для z-индекса высокое значение, он все равно будет находиться под другими элементами, которые находятся на более высоком уровне иерархии.DOM.

Пример:

  • div1
    • div1a
      • a (z-index = 100)
      • b(z-индекс = 101)
      • с (z-индекс = 102)
    • div1b
      • d (z-индекс = -1)
      • e (z-index = 1)

d все равно будет нарисовано поверх a как div1b получает более высокий z-индекс, поскольку он указан после div1a , и средства визуализации HTML рисуют один узел за другим и таким образом определяют z-признаки, если выне указывайте это в своем определении CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...