CSS3

プロパティ

position

→●、mdn

位置決め構想。

position プロパティは、どの 位置決めスキーム（positioning scheme）を利用して、ボックスの位置を計算するかを決定する。static 以外の値は、ボックスを 有位置なボックス（positioned box）にして、ボックスの子孫用の絶対位置決め包含ブロックを確立させる。

static

ボックスは有位置なボックスにはならず、その親整形文脈の規則に則ってレイアウトされる。インセット プロパティは適用されない。

<DIV style="border:1px solid black;
 text-align:center;
 width:150px; height:70px;
">
 <SPAN style="border:1px solid red;
  position:static;
 ">テスト</SPAN>
</DIV>

relative

ボックスは、static のときと同じにレイアウトされた上で、結果の位置からオフセットされる。このオフセット法は、純粋に視覚的な効果であり、他のボックスのサイズや位置には影響しない ─ ボックスの先祖のスクロール可能な過フロー区画が増大することを除けば。

この位置決めスキームは、相対位置決め（relative positioning）と呼ばれる。

開始<SPAN style="border:1px solid red;
 position:relative;
 left:-10px;
">テスト</SPAN>終了

sticky

次を除き、relative に一致する ：

そのオフセットは、最も近いスクロール域（を当のボックスのインセット プロパティで改変した結果）を基準に自動的に調整される ─ それは、利用者がスクロールするに伴い、ボックスを その包含ブロックの中で、ビュー内に保つよう試行する。 ただし、所与の軸に対応する両インセットプロパティの値とも auto になる場合、その軸については調整されない。

この位置決めスキームは、張付き位置決め（sticky positioning）と呼ばれる。

開始<SPAN style="border:1px solid red;
 position:sticky;
 left:-10px;
">テスト</SPAN>終了

¶効果なし

<DIV style="border:1px solid black;
 width:100px; height:70px;
 overflow:auto;
">
 <SPAN style="border:1px solid red;
  position:sticky;
  top:10px;
 ">テスト</SPAN><BR>あ<BR>い<BR>う<BR>え<BR>お
</DIV>

absolute

ボックスは、フロー外に取り除かれ、その［同胞／先祖］のサイズや位置に対する影響も、親の整形文脈にも関与することもなくなる。

代わりに、ボックスは、もっぱら、ボックスの絶対位置決め包含ブロックをボックスのインセット プロパティにより改変した結果を基準に位置され、サイズされる ─ § 絶対位置決めのレイアウト モデルを見よ。
その結果、ボックスは：

• フロー内にある内容や他の絶対的に位置された要素と重なり合い得る。
• その包含ブロックを確立したボックスの、スクロール可能な過フロー区画に含まれる。

この位置決めスキームは、絶対位置決め（absolute positioning）と呼ばれる。【fixed にて述べるように、用語としてのこの語は、固定位置決めも包摂していることに注意。】

開始<SPAN style="border:1px solid red;
 position:absolute;
 top:10px; left:20px;
">absoluteテスト</SPAN>終了

当文書の先頭に表示される。BODYが基準になっているため。

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

fixed

次を除いて absolute と同じになる：

• ボックスは固定位置決め包含ブロックに相対的に位置され、サイズされる（連続的媒体においては表示域内に／ページ化媒体においてはページ区画内に）。
• ボックスの位置は、この矩形を基準に固定され、文書がスクロールされても移動しない。
• ボックスは、ページ割りされるときはページごとに複製される。

この位置決めスキームは、固定位置決め（fixed positioning）と呼ばれ、絶対位置決めの一種と見なされる。【一方で、絶対位置決め包含ブロックと固定位置決め包含ブロックは、排他的な概念であることに注意。】

開始<SPAN style="border:1px solid red;
 position:fixed;
 top:40px; left:20px;
">fixedテスト１</SPAN>終了

BODYが基準となる。

<DIV style="border:1px solid black;
 position:relative;
 overflow:auto;
 width:100px; height:70px;
">
 <SPAN style="border:1px solid red;
  position:fixed;
  top:60px; left:20px;
 ">fixedテスト2</SPAN><BR>あ<BR>い<BR>う<BR>え<BR>お
</DIV>

どうやってもBODYが基準？

<TABLE><TR><TD>
 <DIV style="border:1px solid black;
  position:relative;
  overflow:auto;
  width:100px; height:70px;
 ">
  <SPAN style="border:1px solid red;
   position:fixed;
   top:80px; left:20px;
  ">fixedテスト3</SPAN><BR>あ<BR>い<BR>う<BR>え<BR>お
 </DIV>
</TABLE>

どうやってもBODY基準か？。stickyでやるしかないかも。

テスト