レイアウト
position
position は、要素をふつうの並び（通常フロー）のまま置くか、ずらすか、並びから外して好きな位置に置くかを指定します。位置は top・right・bottom・left で決めます。
構文
static | relative | absolute | sticky | fixedプレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: flex;
position: relative;
}
.box > :nth-child(2) {
bottom: 24px;
right: 24px;
position: absolute;
}コントロール
positionabsolute
1234
解説
値の意味
static：初期値です。ふつうの並びのまま置き、topなどは効きません。relative：ふつうの位置からtopなどの分だけずらします。元の場所は空いたままで、ほかの要素は詰めません。absolute：ふつうの並びから外し、基準の箱の中の指定した位置に置きます。空いた場所はほかの要素が詰めます。基準の箱は、position が static 以外の一番近い祖先です（無ければページの最初の画面の大きさの箱）。fixed：ふつうの並びから外し、ブラウザの画面（ビューポート）に対して置きます。ページをスクロールしても動きません。sticky：ふだんはふつうの位置にあり、スクロールする箱の中で、スクロールして指定した位置まで来るとそこに貼り付きます。表の見出しや目次などに使います。
このページのプレビュー
箱に position: relative を書いて基準の箱にし、2 番目の項目に bottom: 24px・right: 24px を書いています。absolute では箱の右下から 24px 内側に、relative では元の位置から上と左へ 24px ずれます。fixed を選ぶと、項目はプレビューを飛び出して画面の右下に出ます。sticky はこの箱がスクロールしないので、ふつうの位置のままです。
気をつけること
absolute・fixedにした要素は、大きさが中身に合わせて縮みます。ブロックでも横いっぱいに広がらず、このページの項目 2 もフレックスボックスの中で伸びていた高さが縮みます。- static 以外にした要素は、ふつうの要素より手前に描かれます。重なる順番は
z-indexで変えます。 - 祖先に
transformやfilterがあると、fixedの要素は画面ではなくその祖先に対して置かれます。 stickyはtopなどを 1 つは書かないと貼り付きません。祖先にoverflow: hiddenなどがあると、その箱がスクロールの基準になり、ページをスクロールしても貼り付かなくなります。