任意の場所に画像を重ねる
このサイトの最新1記事に「new」を表示するアイコンを付けてみました。
アイコンそのものはただの画像ですが、CSSで吹出しからはみ出たデザインを与えたので方法の紹介。
まず、設置したい箇所を「div」で囲み、その中に「class="new"」という値を持った「img」を配置します。もちろん「div」の中には自由にテキストや画像を配置して構いません。
<div class="box"> <img src="img/new.png" class="new"> ああいいううええおお </div>
HTMLの記述は以上です。次にCSSを記述します。
今回は「position」というプロパティを使いますので、囲っている「div」に「position:relative;」を記述して、「img class="new"」に対して「position: absolute;」と左右からの位置を記述します。
ソースにするとこんな感じです。
div.box{
position: relative;
}
div.box img.new{
position: absolute;
left:-10px;
top:-7px;
}
この「position: absolute;」は直近で囲まれた「position:relative;」の中で座標(top、bottom、left、right)を指示して強制的に配置するプロパティで、今回の様にはみ出たデザインや定型の位置関係を表現する時に重宝します。
他、突っ込んで知りたい向きにはオススメリンクを→position－スタイルシートリファレンス