Javascript 为什么我的z索引不起作用？
我正在尝试创建一个悬停菜单，但它不起作用。我创建了一个菜单，并将其设置为高z索引值。然后，我使用javascript生成一个表，但随后我向下滚动，该表会出现在我的菜单按钮前面 编辑： 我只是想让它为FF8工作 编辑2： 这段代码实际上可以工作。为了使我的按钮显示在顶部，我只需将我的表z-index设置为-1；Javascript 为什么我的z索引不起作用？,javascript,html,css,z-index,Javascript,Html,Css,Z Index,我正在尝试创建一个悬停菜单，但它不起作用。我创建了一个菜单，并将其设置为高z索引值。然后，我使用javascript生成一个表，但随后我向下滚动，该表会出现在我的菜单按钮前面 编辑： 我只是想让它为FF8工作 编辑2： 这段代码实际上可以工作。为了使我的按钮显示在顶部，我只需将我的表z-index设置为-1； #黑头 { 宽度：100%； 背景色：白色； } #桌子 { 位置：相对位置； 宽度：40%； 左：30%； z指数：-1； } #标题 { 位置：固定； 最高：3%； 左：30%； 宽
#黑头
{
宽度：100%；
背景色：白色；
}
#桌子
{
位置：相对位置；
宽度：40%；
左：30%；
z指数：-1；
}
#标题
{
位置：固定；
最高：3%；
左：30%；
宽度：40%；
z指数：100；
}
.投资部
{
可见性：隐藏；
宽度：30px；
}
.头扣
{
文字装饰：无；
位置：相对位置；
字体系列：Arial；
字体大小：粗体；
颜色：白色；
边框：实心1px黑色；
背景色：黑色；
边界半径：5px；
填充物：5px；
z指数：101；
}
.头部按钮：悬停
{
背景色：白色；
颜色：黑色；
}
#我的桌子{
位置：绝对位置；
排名前10%；
}
#按钮1
{
位置：绝对位置；
最高：0%；
左：0%；
}
#按钮2
{
位置：绝对位置；
最高：0%；
右：0%；
}
#按钮3
{
位置：绝对位置；
最高：0%；
左：50%；
}
#按钮4
{
位置：绝对位置；
排名前10%；
左：50%；
}
#按钮5
{
位置：绝对位置；
排名前10%；
右：0%；
}
桌子
" "
" "
" "
" "
" "
函数create_table（）{
//获取主体的引用
var body=document.getElementsByTagName（“body”）[0]；
//创建一个元素和一个元素
var tbl=document.createElement（“表”）；
tbl.id=“表格”；
var tblBody=document.createElement（“tbody”）；
tbl.style.zIndex=-1；
//创建所有单元格
var xmlDoc=getXML（）；
var x=xmlDoc.getElementsByTagName（“寄存器”）；
对于（变量i=0；i位置：绝对-它将始终使用位置检查某些内容：静态
z-index可以工作，但是两个元素（表和菜单都必须有z-index和position:absolute；如果看不到HTML，很难发现问题
例子
这里有一把小提琴描述了这个问题：
.a1的z索引设置为1000，但仍不可见。b1的z索引仅为1，但可见。（甚至与-1相同）
一般来说
如果嵌套HTML元素，则每个嵌套级别都会创建自己的z索引堆栈。如果在DOM树的更深节点内设置元素的z索引，则可能会发生这样的情况：尽管已将z索引设置为较高的值，但它仍将位于位于DOM更高层次级别中的其他元素之下
例如：
- 第一组
- 第1A分部
- a（z指数=100）
- b（z指数=101）
- c（z指数=102）
- 第1B分部
- d（z指数=-1）
- e（z指数=1）
d仍将绘制在a之上，因为div1b被赋予了更高的z索引，因为它列在div1a之后，HTML渲染器绘制一个接一个的节点，并且如果您不按照CSS定义提供z索引，则通过这种方式定义z索引。您应该尝试制作一个演示，以帮助人们e了解请指定您的目标浏览器。您知道，IE6在z-indexin IE6中有缺陷，即具有z-index（和位置：绝对；）的元素两者都必须从同一个父div键入，位置为：relative；首先，您的
标记应该在HTML的
或
中。Circuisdei是对的。不知何故，我没有看到其余的代码。HTML在那里：）我意识到我的服务器提供了错误的页面。通过使表z-index-1运行良好；将阻止任何人点击表中的任何内容。使用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>