浮動 (floated) ブロックについては、重ね合わせ順序が少し異なります。浮動ブロックは位置指定なしのブロックと位置指定ブロックの間に配置されます。

  1. ルート要素の背景と境界
  2. 位置指定なしのブロックの子孫、 HTML 内での出現順
  3. 浮動ブロック
  4. 位置指定要素、 HTML 内での出現順

実際、以下の例に見られるように、位置指定なしのブロック (DIV #4) の背景と境界は、完全に浮動ブロックの影響を受けませんが、内容は影響を受けます。この挙動は、上記のリストに規則を追加することで示すことができます。

  1. ルート要素の背景と境界
  2. 位置指定なしのブロックの子孫、 HTML 内での出現順
  3. 浮動ブロック
  4. 位置指定なしのインライン要素の子孫
  5. 位置指定要素、 HTML 内での出現順

メモ: この例では、位置指定なしのブロックを除くすべてのブロックが、重ね合わせ順序が見えるように半透明になっています。位置指定なしのブロック (DIV #4) の opacity の値を変更すると、そのブロックの背景と境界が、浮動ブロックや位置指定ブロックの上に飛び出し、おかしな結果になります。これは、仕様書の中で、 opacity の値を適用すると新しい重ね合わせ文脈を作成するという、奇妙な部分によるものです (What No One Told You About Z-Index を参照してください)。

例のソースコード

HTML

<div id="abs1">
  <b>DIV #1</b><br />position: absolute;</div>

<div id="flo1">
  <b>DIV #2</b><br />float: left;</div>

<div id="flo2">
  <b>DIV #3</b><br />float: right;</div>

<br />

<div id="sta1">
  <b>DIV #4</b><br />no positioning</div>

<div id="abs2">
  <b>DIV #5</b><br />position: absolute;</div>

CSS

div {
  padding: 10px;
  text-align: center;
}

b {
  font-family: sans-serif;
}

#abs1 {
  position: absolute;
  width: 150px;
  height: 200px;
  top: 10px;
  right: 140px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  height: 100px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 10px 0px 10px;
  text-align: left;
}

#flo1 {
  margin: 0px 10px 0px 20px;
  float: left;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#flo2 {
  margin: 0px 20px 0px 10px;
  float: right;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#abs2 {
  position: absolute;
  width: 150px;
  height: 100px;
  top: 130px;
  left: 100px;
  border: 1px dashed #990;
  background-color: #fdd;
}

関連情報

原典情報

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

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

このページの貢献者: mfuji09, ethertank, sosleepy
最終更新者: mfuji09,