position:absoluteでボックス横並び
CSS の position の absolute を使いこなす為の基礎知識 はじめてのブログデザイン
を見て。そもそもposition:absoluteとposition:relativeの違いが良くわかってなかった
absolute→親の左上を基準
relative→本来配置される位置が基準
- absolute
- 親の要素が static 以外の値を持っている時、親の左上を基準として位置プロパティ通りに配置する方式。
- relative
- 本来配置されるべき位置からの移動距離を位置プロパティを使い配置する方式。
- fixed
- absolute と同じ条件で配置する位置を決める方式だが、スクロールアウトせず常に同じ位置を保つ配置方式。
- static
- 初期値であり、この値が適用されると位置プロパティでの指定が無効となる配置方式。
ボックスを横並びにしたいときに、liとfloatを使うよりもposition:absolute使った方が楽かも。
