堆疊浮動元素

對於浮動元素，堆疊順序略有不同。浮動元素放置在非定位元素和定位元素之間。

  1. 根元素的背景和邊框。
  2. 後代非定位元素，按 HTML 中出現的順序排列。
  3. 浮動元素.
  4. 後代定位元素，按 HTML 中出現的順序排列。

請參閱 定位型別 以瞭解定位和非定位元素的解釋。

注意：如果將 opacity 值應用於非定位元素（例如，以下示例中的 DIV #4），則會出現奇怪的情況：該塊的背景和邊框會出現在浮動塊和定位塊之上。這是由於規範的一個特殊部分：應用 opacity 值會建立一個新的堆疊上下文（請參閱 沒有人告訴你的關於 Z-Index 的內容）。

示例

在此示例中，您可以看到非定位元素（DIV #4）的背景和邊框完全不受浮動元素的影響，但內容會受到影響。這根據標準的浮動行為發生，可以透過新增到上述列表中的規則來顯示。

  1. 根元素的背景和邊框。
  2. 後代非定位元素，按 HTML 中出現的順序排列。
  3. 浮動元素。
  4. 後代非定位內聯元素.
  5. 後代定位元素，按 HTML 中出現的順序排列。

HTML

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

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

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

<br />

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

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

<div id="rel1"><strong>DIV #6</strong><br />position: relative;</div>

CSS

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

strong {
  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: 80px;
  left: 100px;
  border: 1px dashed #990;
  background-color: #fdd;
}

#rel1 {
  position: relative;
  border: 1px dashed #996;
  background-color: #cff;
  margin: 0px 10px 0px 10px;
  text-align: left;
}

結果

另請參閱