前節では要素の配置の基本と通常の流れに配置される場合の配置のされ方に触れた。ここでは,絶対配置による要素の配置について説明する。
position: absolute;
の場合の配置 position
プロパティを absolute
に指定された要素は,“通常の流れ”から取り除かれ,その要素の収容ブロックを基準に配置される。
ただし,この方法で配置される要素の収容ブロックの決め方は,3.1 で述べた方法と異なり,“その要素の上位要素で,もっとも下位にある,position
プロパティを static
以外に指定された要素のボックス”になる(“通常の流れ”における収容ブロックは,“その要素の上位要素で,もっとも下位にあるブロックボックス”であった)。したがって,この条件に該当する要素がインラインボックスを生成する要素であることもありうる。収容ブロックがインラインボックスであった場合,(テキストの流れが左から右である限りは)その左上はそのインラインボックスの(折り返しで分割された)最初のボックスの左上で,右下は最後のボックスの右下になる(それぞれ厳密には,“要素の内容”の領域の左上および右下になる)。
すこし複雑な話になってしまったが,さしあたりは“position: absolute;
で配置を行う場合は,その基準は‘その要素から上位要素をたどっていって,最初に見つかる position
プロパティを static
以外に指定された要素のボックス’になる”ということを知っていただければよいだろう。
さて,この場合は,要素の位置は top
,right
,bottom
および left
プロパティ,ならびに,width
および height
プロパティ,さらに,margin-top
,margin-right
,margin-bottom
および margin-left
プロパティで決められる。要素の端の位置を指定してもよいし,要素の寸法そのものを指定してもよい(それらを組み合わせてもよい)。ただし,これらのプロパティの指定のしかたによって(多くは auto
以外の値をこれらのプロパティのすべてに設定した場合)は収容ブロックに対して配置するときに矛盾が生じてしまうことがあり,そのときは一定の規則に従ってプロパティの値が再設定される。絶対配置のに詳細については後述することにしよう。
また,絶対配置されたボックスは,ブロックボックスを生成し,その“通常の流れ”にある子要素,および,絶対配置を行おうとする下位要素に対する収容ブロックとなる。
さしあたり,絶対配置の簡単な例を見ていただきたい。
.container { position: relative; height: 15em; }
.article { background-color: #9CF; padding: 0.3em; }
#item1 { position: absolute; top: 0; left: 0; width: 48%; /* 収容ブロックの左に配置する */ }
#item2 { position: absolute; top: 0; right: 0; width: 48%; /* 収容ブロックの右に配置する */ }
H3 { border-bottom: #960 thin solid; }
P { line-height: 1.3; }
<DIV CLASS="container">
<DIV CLASS="article" ID="item1">
<H3>NetBEUI</H3>
<P>NetBEUI は,Microsoft ネットワークのネイティブ プロトコルである。小規模な LAN 向けで,複雑なルーティングは実装していない。NetBIOS の API 規格を実装したものである。</P>
</DIV>
<DIV CLASS="article" ID="item2">
<H3>AppleTalk</H3>
<P>一方,AppleTalk は,アップル コンピュータのネットワーク アーキテクチャおよびネットワーク プロトコルのことである。</P>
</DIV>
</DIV>
NetBEUI は,Microsoft ネットワークのネイティブ プロトコルである。小規模な LAN 向けで,複雑なルーティングは実装していない。NetBIOS の API 規格を実装したものである。
一方,AppleTalk は,アップル コンピュータのネットワーク アーキテクチャおよびネットワーク プロトコルのことである。
上の例のように,position: absolute;
で配置を行う場合のポイントは収容ブロックである。position: static;
が指定されている要素のボックスは収容ブロックにならないため,配置の基準となるボックスに position: static;
以外を指定する(ここでは,container
クラスの要素を position: relative;
にし収容ブロックにしている)。
もうひとつ,position: absolute;
による配置の例をあげておこう。
P { position: relative; margin-left: 15%; line-height: 1.3; /* position プロパティに relative を指定して絶対配置する要素への収容ブロックになる */ }
.sidenote { position: absolute; top: auto; left: -13.5%; width: 13.5%; font-size: 85%; /* 上端は特に指定せず,左のマージン部分に寄せて配置 */ }
<P> DNS<SUP>*</SUP><SPAN CLASS="sidenote">[Domain Name System]</SPAN>は,IP アドレスとホスト名を対応づけるサービスである。われわれは,インターネットの利用のさいに,無意識のうちにこのサービスの恩恵を受けている。具体的には,たとえば,あるホストの IP アドレスを知りたい場合,TLD<SUP>*</SUP><SPAN CLASS="sidenote">[Top Level Domain]</SPAN>についてのデータベースを知るルートサーバに問い合わせ,そこで得られた情報から第 2 レベルを知るサーバに問い合わせ,……,ということがなされ,最終的に目的のホストの IP アドレスが得られる。</P>
DNS*[Domain Name System]は,IP アドレスとホスト名を対応づけるサービスである。われわれは,インターネットの利用のさいに,無意識のうちにこのサービスの恩恵を受けている。具体的には,たとえば,あるホストの IP アドレスを知りたい場合,TLD*[Top Level Domain]についてのデータベースを知るルートサーバに問い合わせ,そこで得られた情報から第 2 レベルを知るサーバに問い合わせ,……,ということがなされ,最終的に目的のホストの IP アドレスが得られる。