写真を２枚重ねた表現

「ナイアガラの滝」と「桜」の２枚の写真を重ねて表示しています。CSSおよび、XHTMLのコーディングは以下の通りです。 
■CSS
　body  　{ margin: 0px; padding: 0px }
  div.box { margin: 0px }
  h1      { font-size: large; text-aligh: center; color: #069 }
  img     { border: 1ex inset #f90 }
  img#1st { position: absolute; top: 0px; left: 0px; z-index: 1 }
  img#s2nd { position: absolute; top: 50px; left: 50px; z-index: 2 }

■XHTML
  <?xml version="1.0" encoding="ISO-2022-JP"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <link rel="stylesheet" type="text/css" href="position.css" />
  <title>レイヤー</title>
  </head>

  <body>
  <h1>写真を２枚重ねた表現</h2>

  <div class="box">
  <img id="1st" src="images/niagara.jpg" width="250" height="180" alt="ナイアガラの滝" />
  <img id="2nd" src="images/sakura.jpg" width="250" height="180" alt="花の絵" />
  </div>

  </body>
  </html>

今週のおさらい

ナイアガラの滝 花の絵