【HTML】【CSS】要素を重ねるには...

HTML CSS/SCSS/SASS

  ■ サンプル1：画像を2つ重ねる場合

<html>
<body>
<h1>サンプル1</h1>
<div style="position: relative;">
 <img src="./ImageA.jpg" alt="重ねる画像" style="position:absolute;"/>
 <img src="./BaseImage.jpg" alt="ペース画像" />
</div>
</body>
</html>

  補足：使用している主な技術：「position」

 * absolute : 絶対位置
 * relative : 相対位置（通常の位置を基準とした相対位置）
 * fixed : 絶対位置 + 固定（ウィンドウを基準とした絶対位置）
 * static : 通常配置（デフォルト）

詳細は以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35805745.html

 

  ■ サンプル2：画像を3つ以上重ねる場合

<html>
<body>
<h1>サンプル2</h1>
<div style="position: relative;">
 <img src="./ImageA.jpg" alt="重ねる画像" style="position:absolute; left=0px; z-index=2;"/>
 <img src="./BaseImage.jpg" alt="ペース画像" style="position:absolute; z-index=0;" />
 <img src="./ImageB.jpg" alt="重ねる画像" style="position:absolute; right=0px; z-index=1;"/>
</div>
</body>
</html>

  注意

 * 画像を右寄せ/左寄せにしたい場合、「float: right」「float: left」で指定しても意図した通りにならない。
  => 表示位置からの距離を指定する「left: 0px」「right: 0px」で対応する

  補足：使用している主な技術：「z-index」

 * z-index : ボックスの重なりの順序を指定。
 * 0を基準として、値が大きいものほど上になる。

詳細は以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35805745.html

 

  参考文献

http://jsdo.it/cojicoji.gray/4uwM
http://webings.net/css/imgzindex/

  position

http://ideahacker.net/2014/02/18/7744/
* absolute の説明が分かりやすい
http://zxcvbnmnbvcxz.com/css_sutudy_3/
http://www.stylish-style.com/csstec/base/position.html

  その他

 * たまたま見つけたサイトで、応用すれば面白いサイトになりそう。
http://blog.goo.ne.jp/sakura-sanpo/e/e932a44ece01bc3341712494a78fcfdb

 

  関連記事

  z-indexプロパティ / positionプロパティ

http://blogs.yahoo.co.jp/dk521123/35805745.html