17
June
position配置
positionレイアウトとは？
各要素の配置に関する基準を設定するプロパティです。
その要素が本来ある位置を基準とする方法(相対位置)や、直接配置場所を設定して配置する方法(絶対位置)を選ぶことが出来ます。
| static | 配置方法を指定せず、場所も指定しません。(初期値) |
|---|---|
| relative | 相対位置から配置を指定します。又、基準ボックスを設定する |
| absolute | 絶対位置から配置を指定します。 |
| fixed | 絶対位置から配置を指定し、画面をスクロールしても固定されます。 |
書式
基準となる親ボックスに対して
.container {
position : relative ;
}
※要高さ幅指定
※この記述が無い場合はbodyが基準ボックスとなる
配置する要素に対して
.himawari {
position : absolute ;
top : 0 ;
left : 0 ;
}
.hybiscus{
right:0;
bottom:50px;
}
表示
演習
※photoshopで画像アセットで書き出し、positionでレイアウト
応用演習
