All geek questions in one place

Why is my z-index not working?

I am trying to create a hover menu, but it does not work. I create a menu and set it with a high z-index value. Then I create the table using javascript, but then scroll the table down in front of my menu buttons.

Edit:

I'm just trying to get this to work for FF8.

Edit 2:

This code really works. To make my buttons appear on top, I just set my 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>
+4
source share
2 answers

myTable has position: absolute; - it will always pass something using position: static;

z-index will work, but both elements (table and menu should have both z-index and position: absolute;

+5
source

Without viewing the HTML, it is quite difficult to detect the problem.

Example

Here is a script describing the problem: http://jsfiddle.net/rZysU/

.a1 z-index is set to 1000, but it still does not appear. b1 is visible, although its z-index is only 1. (it even matches -1)

Generally

If you insert HTML elements, 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, it may happen that although you set the z-index to a high value, it will still be under other elements that are in a higher level of the DOM hierarchy .

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 because div1b gets a higher z-index because it is specified after div1a and the HTML renderers draw one node after the other and define z-pointers this way if you don't provide it by CSS definition.

+2
source

Source: https://habr.com/ru/post/1382529/

More articles:


All Articles