CSSの「position: absolute」でdivをレイヤーのように重ねて表示する方法

フロントエンドが苦手というエンジニアの方向けの記事です。
position: relativeとabsoluteを使って、CSSでdivをレイヤーのように重ねて表示する方法を解説します。

Divをレイヤーのように重ねるサンプルソース

以下のページを作成するためのHTMLとCSSを紹介します。
からあげ弁当の写真以外は全てCSSで作っています。

CSS

画像の上に吹き出し(200円とか)を表示するには、position: absolute;を指定する必要があります。
position: absolute;の親要素(このサンプルではcontentになります。)には、必ずposition: relative;を指定する必要があります。
表示する位置は、top, left, right, bottomで値を指定します。

	.content{
	    position: relative;
	    width: 640px;
	    height: 425px;
	    border: 1px solid #000000;
	}
	
	.photo{
        background-image: url("sample.jpg");
	    width: 100%;
	    height: 100%;
	}

    .price{
        position: absolute;
        top: 50px;
        left: 20px;
        width: 150px;
        height: 30px;
        background-color: #c6001c;
        color: #ffffff;
        padding: 10px;
        font-size: 30px;
        text-align: center;
    }
    .suggest{
        position: absolute;
        top: 250px;
        right: 0px;
        width: 300px;
        height: 30px;
        background-color: #EB3228;
        color: #ffffff;
        padding: 10px;
        font-size: 25px;
        text-align: right;
    }
	.footer{
	    position: absolute;
        bottom: 0px;
	    width: 100%;
	    height: 80px;
	    background-color: rgba(255,0,0,0.5);
	    color: #000000;
	    font-size: 45px;
	    padding: 20px;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    -o-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	    box-sizing: border-box;
	}

HTML

	<div class="content">
	    <div class="photo"></div>
	    <div class="price">200円！？</div>
	    <div class="suggest">赤字覚悟でやってます！</div>
	    <div class="footer">今日だけ半額！驚愕の200円</div>
	</div>

デモ

実際に動かすことが出来ます

親要素でposition: relative;を指定しなかった場合

親要素でposition: relative;を指定しなかった場合は、position: absolute;が有効にならずにデザインが崩れてしまいます。
親要素でposition: relative;は必ず指定しましょう。
以下はposition: relative;を消した場合の崩れたレイアウトです。