Question

我有一个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;
}

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

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

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

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

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

Answer 1

是否有任何特定原因要将z-index: -1添加到subdiv元素？因为，将其添加到subdiv会将其置于maindiv和正文之下，因此您无法点击它。 maindiv会覆盖它，因此subdiv不会捕获悬停和点击事件。

同样，让maindiv拥有z-index: -2会导致body元素在堆叠顺序中覆盖它，因此不会再点击该按钮。

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

来自w3 schools z-index

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

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

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

CSS：z-index和悬停

1 个答案: