z-index の追加

« CSS « CSS の z-index の理解

`z-index` の追加

1 つ目の例、 z-index 無しのスタックでは、デフォルトでスタック（積み重ね）がどのように行われるか説明しています。別の重ね順を定義したければ、位置指定した要素と、z-index プロパティを使う必要があります。

このプロパティには整数値（正または負）を代入し、 z 軸の向きの要素位置を表します。もし z 軸になじみがなければ、ページにいくつもの重なったレイヤーがあるものと考えてください。レイヤーには番号がついています。大きな番号のついたレイヤーほど、小さな番号のレイヤーよりも上に描画されます。

警告! z-index は要素が位置指定されているときにだけ効果を持ちます。

bottom: 観ている人から一番遠い
...
Layer -3
Layer -2
Layer -1
Layer 0 デフォルトの描画レイヤー
Layer 1
Layer 2
Layer 3
...
top: 観ている人に一番近い

注記:

z-index プロパティが定義されていなければ、要素はデフォルトの描画レイヤー 0（ゼロ）に描画されます。
同じ z-index 値を持つ要素が複数あれば（＝同じレイヤー上にある場合）、z-index 無しのスタックで説明したスタック規則が当てはまります。

次の例では、レイヤーの重なり順が z-index を使って決め直されています。DIV#5 の z-index は、この要素が位置指定されていないため効果を持ちません。

Example of stacking rules modified using z-index

ソースコード例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/css">

div {
  opacity: 0.7;
  font: 12px Arial;
}

span.bold { font-weight: bold; }

#normdiv {
  z-index: 8;
  height: 70px;
  border: 1px dashed #999966;
  background-color: #ffffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}

#reldiv1 {
  z-index: 3;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}

#reldiv2 {
  z-index: 2;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}

#absdiv1 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#absdiv2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

</style></head>

<body>

<br /><br />

<div id="absdiv1">
  <br /><span class="bold">DIV #1</span>
  <br />position: absolute;
  <br />z-index: 5;
</div>

<div id="reldiv1">
  <br /><span class="bold">DIV #2</span>
  <br />position: relative;
  <br />z-index: 3;
</div>

<div id="reldiv2">
  <br /><span class="bold">DIV #3</span>
  <br />position: relative;
  <br />z-index: 2;
</div>

<div id="absdiv2">
  <br /><span class="bold">DIV #4</span>
  <br />position: absolute;
  <br />z-index: 1;
</div>

<div id="normdiv">
  <br /><span class="bold">DIV #5</span>
  <br />no positioning
  <br />z-index: 8;
</div>

</body></html>

原典情報

原著者: Paolo Lombardi
この記事は原著者が YappY のためにイタリア語で書いた記事の英訳の邦訳です。Creative Commons: Attribution-Sharealike license の条件に従う限り、全内容の共有を認めます。
最終更新日: 2005 年 7 月 9 日

z-index の追加

`z-index` の追加

ソースコード例

関連情報

原典情報

ドキュメントのタグと貢献者