階層化表示

position特性などを用いて、同じ座票に複数の要素が重なったときの z軸方向(厚み方向)の位置を z-index特性 を用いて制御できる。

z-index特性

その要素の重ね合わせの位置を整数または auto で指定する。 数値が大きいものほど上、つまり手前に見える。

たとえば、以下に示す画像があったとする。

Image of Nintaro

この画像と、別のパラグラフ(p要素)を同じ座標で重ねると、 通常はHTML的にあとに書いた方が上に来る。

<!-- absoluteボックスを包むためのrelativeボックスを作る -->
<div style="position: relative; height: 200px; border: 1px solid;">
<!-- 1つ目の画像用パラグラフ -->
<p style="position: absolute; top: 0; left: 0; width: 230px;">
<img src="nin-tp.png" alt="Image of Nintaro" width="230" height="170">
</p>
<!-- 2つ目の文章用パラグラフ -->
<p style="position: absolute; top: 0; left: 0; width: 230px;">
この物語は、正義の味方忍太郎が難事件をばっさばっさと
解決するのを諦めていく様子を描いたものである。
</p>
</div>

Image of Nintaro

この物語は、正義の味方忍太郎が難事件をばっさばっさと 解決するのを諦めていく様子を描いたものである。

1つ目のp要素のz-index特性値を2にすると、 2つ目のp要素よりも手前に来る。

<!-- absoluteボックスを包むためのrelativeボックスを作る -->
<div style="position: relative; height: 200px; border: 1px solid;">
<!-- 1つ目の画像用パラグラフ -->
<p style="position: absolute; top: 0; left: 0; width: 230px;
 z-index: 2">
<img src="nin-tp.png" alt="Image of Nintaro" width="230" height="170">
</p>
<!-- 2つ目の文章用パラグラフ -->
<p style="position: absolute; top: 0; left: 0; width: 230px;">
この物語は、正義の味方忍太郎が難事件をばっさばっさと
解決するのを諦めていく様子を描いたものである。
</p>
</div>

Image of Nintaro

この物語は、正義の味方忍太郎が難事件をばっさばっさと 解決するのを諦めていく様子を描いたものである。

pngのアルファチャンネルを解釈できないブラウザ(IE6以下)では、 画像だけしか見えない。

これを利用すると、position: fixed で固定させた要素ボックスを 回り込んで避けるようなレイアウトが作れる。たとえば、ユーザエージェントの ウィンドウの左上に5em×5emの大きさの固定要素を置いたとする。

div#menu {
  position: fixed; left: 0; top: 0; width: 5em; height: 5em;
  border: 1px solid;
}

<body>
<div id="menu">
<ul>
 <li> 玄関
 <li> 趣味
 <li> 勉強
</ul>
</div>
<div id="main">
<p>あーだこーだ、なんちゅーかほんちゅーか、すっとこどっこい....</p>
</div>
</body>

id="main"のdivには、つぎつぎと本文を書いて行くことを想定 している。ただし、このまま本文を書くと、id="menu" の divと同じ位置から本文が始まるので重なって見えなくなってしまう。

あーだこーだ、なんちゅーかほんちゅーか、すっとこどっこい....

通常は、menuと重なるのを回避するために div#main の左マージンを div#menu の幅より大きくする。

div#main {margin-left: 6em;}

こうすることで、以下のように重ならなくなるのだが、

あーだこーだ、なんちゅーかほんちゅーか、すっとこどっこい....
左にあるちいさい枠部分はスクロールしても固定していると思ってね。
あれれれ、これれれ、 やっしょー
まかしょ
左が空いちゃってもうもったいないったらありゃしない。もったいないオバケが 出るぞぉぉぅ

左側に空いた6emの隙間は文書末まで続き、スペースの無駄となる。

これを float と階層化表示を使って、上手に div#menu だけ 回り込みで避けるようにしてみる。div#menu は position: absolute で あるから、通常のフローとは独立してしまう。したがって、これを回り込みで 避けるには div#main の中に div#menu と同じ大きさのブロックを 重ねて配置し、それを float: left にしておくとよい。ただし、重なり (z-index)を調整して div#menu の方が手前に来て読めるようにする。

div#menu {
  position: fixed; left: 0; top: 0; width: 5em; height: 5em;
  border: 1px solid; z-index: 2;
}
div#main div#uramenu {
  /* div#menu のleft: 0; top: 0; に相当 */
  margin-left: 0; margin-top: 0;
  /* div#menu の大きさと揃える */
  width: 5em; height: 5em;
  /* 右と下のマージンは文章と接するので広めに取る */
  margin-right: 1em; margin-bottom: 1em;
  /* 次の本文が右に避けて行くよう、このフロートを 左に */
  float: left;
}

こうしておいて、div#main の内部にからっぽの div#uramenu を配置する(該当部分のみ示す)。

<div id="main">
<div id="uramenu"></div>
<p>あーだこーだ、なんちゅーかほんちゅーか、すっとこどっこい....
  〜〜中略〜〜
</p>

あーだこーだ、なんちゅーかほんちゅーか、すっとこどっこい....
あれれれ
これれれ
やっしょー
まかしょ
左が空いちゃってもうもったいないったらありゃしない。もったいないオバケが 出るぞぉぉぅ

実際に position: fixed; を用いて記述したページの 例を示す: ffz.html

yuuji@koeki-u.ac.jp