CSS3

プロパティ

top、right、bottom、left

→● mdn（top right bottom left）

ボックス インセットの距離。

auto

拘束されないインセットを表現する。正確な意味は、位置決めスキームに依存する。

<DIV style="border:1px solid black; width:100px; height:70px">
 <SPAN style="border:1px solid black;
  position:relative;
 ">テスト</SPAN>
</DIV>
<DIV style="border:1px solid black; width:100px; height:70px">
 <SPAN style="border:1px solid red;
  position:relative;
  top:auto;
 ">テスト</SPAN>
</DIV>

<length-percentage> ○

＝<length> | <percentage>

これらのインセット プロパティは、ボックスの対応している側からの“インセット”― 内方へのオフセット ― を表現する（どのプロパティが上下左右どの側に対応するかは、ボックスの自前の書字モードに基づく ― [CSS-WRITING-MODES-3] § ボックスの抽象的な各種用語 を見よ）。例えば、top プロパティは、上端辺から下方へのインセットを表現する。物理的なプロパティとフロー相対なプロパティは、[CSS-LOGICAL-1] に定義されるように相互作用する。

各種 値の意味は：

<length> ○

インセットは、基準辺からの固定的な距離になる。

負な値も許容される。

<DIV style="border:1px solid black; width:100px; height:70px">
 <SPAN style="border:1px solid black;
  position:relative;
 ">テスト</SPAN>
</DIV>
<DIV style="border:1px solid black; width:100px; height:70px">
 <SPAN style="border:1px solid red;
  position:relative;
  top:10px;
  bottom:10px;
 ">テスト</SPAN>
</DIV>

<DIV style="border:1px solid black; width:100px; height:100px;
 writing-mode: vertical-rl;
">
 <SPAN style="border:1px solid black;
  position:relative;
 ">テスト</SPAN>
</DIV>
<DIV style="border:1px solid black; width:100px; height:100px;
 writing-mode: vertical-rl;
">
 <SPAN style="border:1px solid red;
  position:relative;
  top:10px;
 ">テスト</SPAN>
</DIV>

<percentage> ○

インセットは、対応する軸における包含ブロックのサイズ（例： left／right プロパティに対しては横幅、top／bottom プロパティに対しては縦幅）に相対的な百分率になる。張付きに位置されたボックス用のインセットは、代わりに最も近いスクロール域のサイズに相対的になる。

負な値も許容される。

<DIV style="border:1px solid black; width:100px; height:70px">
 <SPAN style="border:1px solid red;
  position:relative;
  top:50%;
 ">テスト</SPAN>
</DIV>

注記： 固定的に位置された要素用のインセットに大き過ぎる値や負な値を利用すると、要素は表示域の外側へ容易に移動され得る。そうなった場合、内容は、スクロールする、その他の手段を通して到達できなくなる。

関連

inset-block-start、inset-inline-start、inset-block-end、inset-inline-end。position。

テスト