我正在尝试创建一个悬停菜单，但它不起作用。我创建了一个菜单并将其设置为较高的 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 有 position: absolute; - 总是会覆盖 position: static;
z-index 可以，但是两个元素(表格和菜单都必须有 z-index 和 position: absolute;
关于javascript - 为什么我的 z-index 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8230450/