Por que meu índice z não está funcionando?

Estou tentando criair um menu pairando, mas isso não funciona. Eu criei um menu e configurá-lo com um alto valor do índice z. Em seguida, gere uma tabela usando javascript, mas então eu rolo paira baixo a tabela vai na frente dos meus botões de menu.

Editair:

  • Java Script paira editair o conteúdo da página em tempo real
  • bootpag - Não funciona Exemplo básico
  • Reagir transição suave entre diferentes estados em um componente
  • Javascript - Não consigo encontrair meu erro. (Botões de rádio)
  • URIError: sequência de URI malformada?
  • Fechair um modo de boot reativa com key de escape
  • Estou apenas tentando conseguir isso paira o FF8.

    Editair 2:

    Este código realmente funcionairá. Paira que meus botões apaireçam no topo, basta configurair meu índice z da table em -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:hoview { 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="headerBair"> <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="stairt_timer()">Stairt 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 vair body = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element vair tbl = document.createElement("table"); tbl.id = "table"; vair tblBody = document.createElement("tbody"); tbl.style.zIndex = -1; // creating all cells vair xmlDoc = getXML(); vair x = xmlDoc.getElementsByTagName("Registers"); for (vair i = 0; i < x.length; i++) { // creates a table row vair 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 vair name = document.createElement("td"); name.style.width = "80%"; vair nameText = document.createTextNode(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue); name.appendChild(nameText); row.appendChild(name); vair number = document.createElement("td"); number.style.width = "10%"; vair numberText = document.createTextNode(x[i].getElementsByTagName("number")[0].childNodes[0].nodeValue); number.appendChild(numberText); row.appendChild(number); vair value = document.createElement("td"); value.style.width = "10%"; vair 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> 

  • HtmlImageElement - como obter o tipo de image se o seu src não tiview extensão
  • Faça HTML visível dentro do Iframe
  • Exibir modal ao clicair em um segmento de torta Morris
  • Menu do button direito do mouse na tabela Html no IE Exibe no canto superior esquerdo
  • Forçair o problema de lairgura total ao usair RTL
  • Existe uma maneira de usair o Canvas no IE7 ou no IE8?
  • 2 Solutions collect form web for “Por que meu índice z não está funcionando?”

    myTable tem position: absolute; – isso sempre vai sobre algo com position: static;

    O índice z funcionairá, mas ambos os elementos (a tabela e o menu têm paira ambos ter o índice z e a position: absoluto;

    Sem view o HTML é muito difícil detectair o problema.

    Exemplo

    Aqui está um violão descrevendo o problema: http://jsfiddle.net/rZysU/

    O índice z do .a1 é definido como 1000, mas ainda não está visível. b1 é visível, embora seu índice z seja apenas 1. (ele mesmo é o mesmo com -1)

    Em geral

    Se você aniquilair elementos HTML, cada nível de nidificação cria sua própria stack de índice z. Se você definir o índice z de um elemento dentro de um nó mais probackground na tree DOM, pode acontecer que, embora você tenha configurado o índice z paira um valor alto, ele ainda estairá por baixo de outros elementos que residem em um nível de hierairquia superior dos DOM.

    Exemplo:

    • div1
      • div1a
        • a (índice z = 100)
        • b (índice z = 101)
        • c (índice-z = 102)
      • div1b
        • d (índice z = -1)
        • e (índice-z = 1)

    D ainda será desenhado em cima de um como div1b é dado um índice z mais alto porque ele está listdo após div1a e os renderizadores HTML desenham um nó após o outro e definem z-indicies por esse path, se você não o fornecer por seu CSS definição.

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.