position
要素の位置を、表示されているページの何を基準に配置するかを決めるCSSプロパティです。
設定することで、プロパティ top , bottom , left , right を使って要素の実際の配置位置を決めることができるようになります。
position: stasic;
値 stasic は、何も位置について設定しない場合(初期値)です。要素の位置を変えることはできません。
<div class="parent">
<img class="picture" scr="～画像データ～">
<p class="child">少女と白イタチ</p>
</div>
/* 設定しない = position: static; */
少女と白イタチ
position: relative;
値に relative を設定すすると、この値をつけた要素が位置の基準(相対的位置指定)となります。
こうすることで、プロパティ top , bottom , left , right を使って、要素を移動させて表示させることができるようになります。
.picture {
position: relative; /* img の位置を基準に設定 */
top: 16px; /* 上端から16px下に配置 */
left: 8em; /* 左端から8em右寄りに配置 */
}
少女と白イタチ
position: absolute;
値に absolute を指定すると、絶対的位置指定となります。
外枠設定がなければ、ページそのものの位置が基準となり、ページ内のどこでも要素を表示できるようになります。
もし、外枠(親)要素に、relative が設定してあり、その内部の(子)要素であれば、外枠の要素位置が基準となります。つまり、relative 設定の要素を基準に absolute 設定の要素を移動させて表示させることができるようになります。
.parent { /* 外枠(親要素) */
position: relative; /* 外枠(親要素)を位置の基準に設定 */
}
.child {
position: absolute; /* p 要素(子)を絶対位置で設定 */
top: 6px; /* 位置の基準はimgではなく、div となることに注意 */
left: 20px:
color: #fff;
background: transparent; /* 背景色は透明 */
}
少女と白イタチ
position: fixed;
値に fixed を指定すると、基準位置がブラウザのビューポートとなり、画面の設定した位置に常に表示されるよう(固定位置指定)になります。
<div class="fixed-box">表示</div>
.fixed-box {
padding: 0 8px;
border: solid 1px #06a;
border-radius: 8px;
background: #06a;
color: #fff;
position: fixed;
bottom: 6em;
left: 2em;
}
↙画面左下に表示されています。
まとめ
・先ず、配置方法（relative,absolute,fixed）を設定し、次に top , bottom , left , right で位置を指定する。
・新しい表示位置の基準にしたい要素に relative を設定する。
・実際の表示要素には absolute を設定する。