レイアウト

inset

inset は、位置を決めた要素（position が static 以外）の top・right・bottom・left をまとめて指定するショートハンドです。

構文

<'top'>{1,4}

1234

プリセット

見本

項目

右下の角をドラッグするとサイズを変えられます

.box {
  display: flex;
  position: relative;
}

.box > :nth-child(2) {
  position: absolute;
  inset: 16px 16px auto auto;
}

inset

4 辺を同じ値にする

top16px

right16px

bottomauto

leftauto

1234

margin と同じように 1〜4 個の値を書きます。4 個なら上・右・下・左の順（時計回り）、2 個なら上下と左右です。値は長さ、%、auto で、負の値も書けます。% は基準の箱の幅（左右）や高さ（上下）に対する割合です。

向かい合う辺（上と下、左と右）の片方だけを決めると、その辺からの距離で置きます。このページの初期状態は、上と右から 16px の位置です。
両方とも auto なら、ふつうの並びにあったときの位置（静的位置）に置きます。フレックスボックスの中では、ほかの項目が無いものとして置いた位置になるので、このページで inset: auto にすると項目 2 は箱の左上に重なります。
両方とも決めると、幅や高さが auto ならその間いっぱいに広がります。inset: 0 は基準の箱いっぱいに広げるよく使う書き方です。このページの項目は幅が決まっているので、横は左の値が勝ち、縦だけ伸びます。

position が static の要素には効きません。このページでも項目に position: absolute を書いています。
Chrome・Edge は 87、Firefox は 66、Safari は 14.1 から対応しています。書く向きに合わせる inset-block・inset-inline もあります。