如何在 <header> 元素前显示 div

Question

如何在标题前面显示位于 <header> 元素之外的 div，即具有更高的 z-index。我尝试使用 z-index 属性，但它似乎不起作用。我的特定示例可以在这里看到：http://www.spabc.com/drupal/ 我想在标题栏前面的右侧显示徽标。

Answer 1

将position: relative; 添加到#logo。

#logo {position: relative;}

Answer 2

添加

position: relative;

到#logo 可以。至于z-index，它不适用于默认定位元素。标准的position 属性是static。

z-index 仅适用于定位元素（位置：绝对， 位置：相对，或位置：固定）。

详细了解 z-index here。

默认元素堆叠

我在MDN 上读到了这篇文章，我想我会先看一遍，然后再发到这里。

当元素的属性中没有 z-index 时，元素按以下顺序堆叠，3 是最靠后的一个：

1. 根元素的背景和边框
2. 正常流程中的后代块，按出现顺序（在 HTML 中）
3. 后代定位元素，按出现顺序（在 HTML 中）

这个命令仍然有规则。

• 如果多个重叠对象的position 值相同，则按照它们在 HTML 文档中的位置给出顺序。
• 如果未设置position 值，则默认为static 值。 static 元素将始终落后于具有 position 值。

div {
  font: 12px Arial;
}
span.bold {
  font-weight: bold;
}
#normdiv {
  height: 70px;
  border: 1px dashed #999966;
  background-color: #ffffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}
#reldiv1 {
  opacity: 0.7;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}
#reldiv2 {
  opacity: 0.7;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}
#absdiv1 {
  opacity: 0.7;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}
#absdiv2 {
  opacity: 0.7;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

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

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

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

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

<div id="normdiv">
  <br /><span class="bold">DIV #5</span>
  <br />no positioning
</div>

在浮动对象上没有 z-index 的堆叠

对于浮动块，堆叠顺序有点不同。浮动块放置在非定位块和定位块之间：

1. 根元素的背景和边框
2. 正常流程中的后代块，按出现顺序（在 HTML)
3. 浮动块
4. 正常流中的内联后代
5. 后代定位元素，按出现顺序（在 HTML 中）

div {
  font: 12px Arial;
}
span.bold {
  font-weight: bold;
}
#absdiv1 {
  opacity: 0.7;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 10px;
  right: 140px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}
#normdiv {
  /* opacity: 0.7; */
  height: 100px;
  border: 1px dashed #999966;
  background-color: #ffffcc;
  margin: 0px 10px 0px 10px;
  text-align: left;
}
#flodiv1 {
  opacity: 0.7;
  margin: 0px 10px 0px 20px;
  float: left;
  width: 150px;
  height: 200px;
  border: 1px dashed #009900;
  background-color: #ccffcc;
  text-align: center;
}
#flodiv2 {
  opacity: 0.7;
  margin: 0px 20px 0px 10px;
  float: right;
  width: 150px;
  height: 200px;
  border: 1px dashed #009900;
  background-color: #ccffcc;
  text-align: center;
}
#absdiv2 {
  opacity: 0.7;
  position: absolute;
  width: 150px;
  height: 100px;
  top: 130px;
  left: 100px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

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

<div id="flodiv1">
  <br /><span class="bold">DIV #2</span>
  <br />float: left;
</div>

<div id="flodiv2">
  <br /><span class="bold">DIV #3</span>
  <br />float: right;
</div>

<br />

<div id="normdiv">
  <br /><span class="bold">DIV #4</span>
  <br />no positioning
</div>

<div id="absdiv2">
  <br /><span class="bold">DIV #5</span>
  <br />position: absolute;
</div>