CSS では position: の指定でもって TABLE 以上に柔軟なレイアウトが可能となっている。そのうち position: relative での指定は「HTML の要素のボックスを可視化」の方で確認しているので、ここでは position: absolute の方だけを確認する。
position: relative は相対配置、position: absolute は絶対配置、と、CSS の入門的なドキュメントやリファレンスには書いてあったりするが、はっきり言ってこれだけ読んでもなんのことかさっぱり分からない。実際のところ位置を決定する基準に限れば、両者の関係は非常に明白だ。
になるのである。
ということは position: absolute を使いこなすためにはまず包含ブロックを理解する必要がある。
包含ブロックは、自分の祖先（親や、親の親）要素のうち、position: static 以外の指定を受けたボックスである。つまり、あるボックスを position: absolute で位置指定するためには、先に position: relative か position: absolute か position: fixed のいずれかのボックスを生成しておき、その子要素として位置指定を行わなければいけない。
なるほど。
あれ、じゃあ最初の position: absolute を指定する要素は何を基準にするの？
それは初期包含ブロックである。要するに body 要素すべてを飲み込む最も大きなブロックが初期包含ブロック。スクロールする部分も含めてすべての部分。
ところで当たり前だけれどこれは HTML でも CSS でも明示できない。単に位置、大きさの基準になるだけで何らかの効果を指定することは不可能である。
さて、といったところでポジショニングの実験を始めよう。
CSS は TABLE よりも柔軟なレイアウトが実現できるというけれど、これが案外思ったようにレイアウトできない。むしろグリッドに沿うという意味では TABLE を使ったレイアウトの方が感覚的にも美しいものがしかも手軽にできるんじゃないの？
ここは横幅を固定し、margin で水平方向の位置を調整した DIV ボックスです。
右端に指定した DIV ボックス内の要素
ここは DIV ボックスの後ろの要素です。
CSS は TABLE よりも柔軟なレイアウトが実現できるというけれど、これが案外思ったようにレイアウトできない。むしろグリッドに沿うという意味では TABLE を使ったレイアウトの方が感覚的にも美しいものがしかも手軽にできるんじゃないの？
ここは横幅を固定し、margin で水平方向の位置を調整した DIV ボックスです。
右端に指定した DIV ボックス内の要素
ここは DIV ボックスの後ろの要素です。
真中の DIV ボックスは横幅を全体の半分に、左の余白を 20% に、右の余白を 30% に設定してある。（そう見えていなければブラウザのバグである。）
これを position でいじっていくことにする。
CSS は TABLE よりも柔軟なレイアウトが実現できるというけれど、これが案外思ったようにレイアウトできない。むしろグリッドに沿うという意味では TABLE を使ったレイアウトの方が感覚的にも美しいものがしかも手軽にできるんじゃないの？
ここは横幅を固定し、margin で水平方向の位置を調整した DIV ボックス１です。
右端に指定した DIV ボックス１内の要素
ここは DIV ボックス１の後ろの要素です。
CSS は TABLE よりも柔軟なレイアウトが実現できるというけれど、これが案外思ったようにレイアウトできない。むしろグリッドに沿うという意味では TABLE を使ったレイアウトの方が感覚的にも美しいものがしかも手軽にできるんじゃないの？
ここは横幅を固定し、margin で水平方向の位置を調整した DIV ボックス１です。
右端に指定した DIV ボックス１内の要素
ここは DIV ボックス１の後ろの要素です。
position: absolute; right: 0; で右端に位置を指定した DIV ボックス１の中の要素のはずのテキストが、DIV ボックス１を飛び出している。これは DIV ボックス１が包含ブロックとして機能していないためである。そこで初期包含ブロックである body の右端を基準に、ウィンドウ幅いっぱいに右寄せになってしまう。
top も bottom も指定しなかったので縦方向に関しては位置の変化はない。これは救いである。上手に使えばけっこう便利かもしれない。（ここで top も bottom も指定しなかったのは、うっかり指定すると文書の上端、下端に要素が移動して、もはやテスト文書との関連が目では確認できなくなってしまうからである。）
そしてこれがかなり大きなミソだが、後続の要素が、その position: absolute で位置を指定した要素があたかも存在しないかのように DIV ボックスのうしろに続けて表示されている点である。これに気をつけないとあっという間に文字やら画像が重なって何がなんだか分からない表示になってしまう。直し方もよく分からず、CSS なんかきらいだわ、けっきょく background とか border ぐらいしか使えねーよ、という判断を下しかねない。
CSS は TABLE よりも柔軟なレイアウトが実現できるというけれど、これが案外思ったようにレイアウトできない。むしろグリッドに沿うという意味では TABLE を使ったレイアウトの方が感覚的にも美しいものがしかも手軽にできるんじゃないの？
ここは横幅を固定し、position: relative で水平方向の位置を調整した DIV ボックス２です。
右端に指定した DIV ボックス２内の要素
ここは DIV ボックス２の後ろの要素です。
CSS は TABLE よりも柔軟なレイアウトが実現できるというけれど、これが案外思ったようにレイアウトできない。むしろグリッドに沿うという意味では TABLE を使ったレイアウトの方が感覚的にも美しいものがしかも手軽にできるんじゃないの？
ここは横幅を固定し、position: relative で水平方向の位置を調整した DIV ボックス２です。
右端に指定した DIV ボックス２内の要素
ここは DIV ボックス２の後ろの要素です。
テスト２はテスト１に似ているけれども、DIV ボックスの位置を margin ではなく position: relative で指定しているため、この DIV ボックスが包含ブロックとなっている点が違う。
おかげで position: absolute; right: 0; で位置を指定したテキストがこの DIV ボックスの右端を基準に配置されている。
しかし相変わらず縦方向の指定はしていないので DIV ボックスのうしろで後続のテキストの侵食を受けながら表示されている状態である。
CSS は TABLE よりも柔軟なレイアウトが実現できるというけれど、これが案外思ったようにレイアウトできない。むしろグリッドに沿うという意味では TABLE を使ったレイアウトの方が感覚的にも美しいものがしかも手軽にできるんじゃないの？
ここは横幅を固定し、position: relative で水平方向の位置を調整した DIV ボックス３です。
右端に指定した DIV ボックス３内の要素
ここは DIV ボックス３の後ろの要素です。
CSS は TABLE よりも柔軟なレイアウトが実現できるというけれど、これが案外思ったようにレイアウトできない。むしろグリッドに沿うという意味では TABLE を使ったレイアウトの方が感覚的にも美しいものがしかも手軽にできるんじゃないの？
ここは横幅を固定し、position: relative で水平方向の位置を調整した DIV ボックス３です。
右端に指定した DIV ボックス３内の要素
ここは DIV ボックス３の後ろの要素です。
テスト２の結果に加え、さらに DIV ボックス内のテキストが bottom: 0 で DIV ボックスと下端を揃えるように指定されている。
ただし、margin-bottom の分は余白になっている。本当にぴったりと指定するなら margin や padding のコントロールが大事。
CSS は TABLE よりも柔軟なレイアウトが実現できるというけれど、これが案外思ったようにレイアウトできない。むしろグリッドに沿うという意味では TABLE を使ったレイアウトの方が感覚的にも美しいものがしかも手軽にできるんじゃないの？
ここは横幅を固定し、position: absolute で水平方向の位置を調整した DIV ボックス３です。
右端に指定した DIV ボックス３内の要素
ここは DIV ボックス３の後ろの要素です。
CSS は TABLE よりも柔軟なレイアウトが実現できるというけれど、これが案外思ったようにレイアウトできない。むしろグリッドに沿うという意味では TABLE を使ったレイアウトの方が感覚的にも美しいものがしかも手軽にできるんじゃないの？
ここは横幅を固定し、position: absolute で水平方向の位置を調整した DIV ボックス３です。
右端に指定した DIV ボックス３内の要素
ここは DIV ボックス３の後ろの要素です。
テスト２，３と異なり、今度は DIV ボックスそのものを position: absolute で位置指定しているので、DIV ボックスのうしろの要素も DIV ボックスを無視している。
