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

Question

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

Answer 1

将 position: relative; 添加到 #logo。

#logo {position: relative;}

Answer 2

添加

position: relative;

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

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

详细了解 z-index here。

默认元素堆叠

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

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

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

此订单仍有规则。

If the position value of multiple overlapping objects is the same, the order is given by their position in the HTML document.

If a position value is not set, it defaults to the static value. static elements will always fall behind elements that have a position value.

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 进行堆叠

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

根元素的背景和边框
正常流程中的后代块，按出现顺序（在 HTML)
浮动方块
正常流程中的内联后代
后代定位元素，按出现顺序（在 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>

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

how to display div in front of <header> element

css

z-index

drupal-theming

默认元素堆叠

在浮动对象上不使用 z-index 进行堆叠