
フロントエンドが苦手というエンジニアの方向けの記事です。
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;を消した場合の崩れたレイアウトです。
さいごに
relativeを忘れるとレイアウトが崩れます。
position: relativeとabsoluteは必ずセットで使うように意識しましょう!
それでは!
この記事はお役に立てましたか?
お役に立てたことがあればシェアしていただけると嬉しいです!