0

我有一个 html 文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css"/>
</head>
<div class="maindiv"><div class="subdiv"><input type="submit" class="button" value="button"/></div></div>
<body>
</body>
</html>

和 test.css 文件：

@charset "utf-8";
/* CSS Document */

.maindiv {
position:relative;
}
.subdiv {
position:relative;
}
.button:hover {
background-color:#333;
}

到目前为止一切正常。如果鼠标悬停在按钮上，按钮的背景会改变颜色。

我为细分添加了 z-index=-1。

.subdiv {
position:relative;
z-index:-1;
}

之后悬停不起作用。因此，当鼠标悬停在按钮上并且它正在捕获“div.maindiv”时，我使用 Firefox Inspector 工具来捕获元素。所以我想为 maindiv 添加 z-index=-2 ，然后它正在捕获“body”

有人可以告诉我为什么会这样吗？

4

1 回答 1

1

z-index: -1您添加到subdiv元素中是否有任何特定原因？因为，将其添加到andsubdiv会将其放置在 and 主体的“下方”，因此maindiv您将无法单击它。将maindiv覆盖它，因此不会捕获悬停和单击事件subdiv。

同样，制作maindivhavez-index: -2将导致body元素以堆叠顺序覆盖它，因此不会再次单击按钮。

如果您给body元素 a position: relative; z-index: -3;，则可以通过上述逻辑单击该按钮。

来自w3 学校 z-index

z-index 属性指定元素的堆栈顺序。

具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。

查看此链接以了解有关 z-index 的更多信息。

于 2013-06-19T18:08:34.273 回答