1

見つけたページから単純な z インデックスの例を複製しようとしていますが、うまくいきません。

例は次のページにあります:ここをクリックしてください:

この例は、2 つの 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 の例にはエラーがあります。ただし、独自の例には適切なdoctype宣言がありますが、quirksモードも使用しています。

quirks モードでは、長さの単位を省略するなどのエラーは許容されますが、実際の (X)HTML では許容されません。したがって、あなたがすべきことはpx、すべての単位のない長さに追加して、これらのエラーを修正することです。

top: 10px;
left:80px;

等々。

于 2013-01-01T22:01:55.030 に答える