1

我正在尝试从我找到的页面复制一个简单的 z 索引示例，但它不起作用。

示例在以下页面：请单击此处：

该示例显示了两个重叠的 div。但是，当我尝试通过使用从示例页面复制和粘贴的以下代码创建基本页面来复制示例时，而不是像在示例页面上那样重叠的 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>
4

1 回答 1

0

quackit 的示例有错误。但它也使用 quirks 模式，而您自己的示例具有正确的 doctype 声明。

现在在怪癖模式下，诸如省略长度单位之类的错误是可以容忍的，但对于真正的 (X)HTML 则不行。所以你应该做的是通过附加px到所有无单位长度来纠正这些错误。

top: 10px;
left:80px;

等等。

于 2013-01-01T22:01:55.030 回答