Question

我正在尝试从我找到的页面复制一个简单的z索引示例，但这并不是一件容易的事。

示例位于以下页面：Please click here：

该示例显示两个div重叠。但是，当我尝试通过使用以下代码创建基本页面来复制示例时，我复制了＆amp;从示例页面粘贴，而不是像在示例页面上那样重叠的div，它们只是在页面上垂直堆叠在另一个上面。

非常感谢任何反馈。

<!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></title>
</head>

<body>

<style type="text/css">
div { border:1px solid black; }
.infront {
background-color:#ff9900;
width:100px;
height: 100px;
position: relative;
top: 10;
left:80;
z-index: 2;
}
.behind {
background-color:#eeeeee;
width:100px;
height: 100px;
position: relative;
top: -60;
left:35;
z-index: 1;
}
</style>
<div class="infront">
In front
</div>
<div class="behind">
Behind
</div>
</body>
</html>

Answer 1

quackit的例子有错误。但它也使用怪癖模式，而你自己的例子有一个适当的doctype声明。

现在处于怪癖模式，省略了省略长度单位的错误，但不包括真实（X）HTML。所以你应该做的是通过将px附加到所有无单位长度来纠正这些错误。

top: 10px;
left:80px;

等等。

基本z索引不起作用

1 个答案: