CSSスキル - 第6章 Lesson5

位置を指定して配置するpositionプロパティの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

位置を指定して配置することの出来る、positionプロパティの考え方と、書き方を初心者向けに解説しています。



この動画で学べること

・positionでボックスの位置を指定する方法



positionでボックスの位置を指定する方法

今回は、positionというボックスの位置を指定するプロパティについて学んでいきましょう。
positionを使うと、基準となるボックスからどれだけずらして配置させるかを指定することができます。
基準となるボックスには「relative」という値を入力し、位置を指定したい要素を「absolute」で指定していきましょう。
今回は、リボンを画像の右上に配置してみたいと思います。
まずは、位置を指定したいリボンの親要素となる<article>にposition: relative;を定義します。





article {
position: relative;
}




これで、<article>を基準として指定できました。
次は、この<article>の左上を基準としてリボンをどれだけずらすかを決めていきましょう。
要素をずらす方法は、プロパティにtop,bottom, left, right,のいずれかと、ずらす距離(px)を記述します。






今回は、上から19pxで右から30pxのところに配置するので、このように書きます。



p#ribbon {
position: absolute;
top: 19px;
right: 30px
}



保存してブラウザで見てみましょう。
リボンを画像の右上の位置に配置することができました。