如何在标题前面显示侧边栏？

Question

如何在标题前面显示侧边栏？

＆＃13;

＆＃13;

.header {
  z-index: -10;
  margin: auto;
  width: auto;
  height: 70px;
  background-color: black;
}

.sidebar {
  position: relative;
  z-index: 10;
  margin: auto;
  height: 1335px;
  width: 65px;
  background-color: red;
}

＆＃13;

<div id="wrapper">
  <header>
    <div class="header"></div>
    <div class="sidebar"></div>
  </header>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在您的代码中，两个元素都在文档流程中。所以侧边栏出现在标题之后，而不是重叠。使它们重叠的一种方法是将其中一个设置为position:absolute并将其从文档流中删除。

＆＃13;

＆＃13;

body {
  margin: 0;
}

.header {
  height: 70px;
  background-color: black;
}

.sidebar {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -32.5px;
  width: 65px;
  height: 1335px;
  background-color: red;
}

＆＃13;

<div id="wrapper">
  <header>
    <div class="header"></div>
    <div class="sidebar"></div>
  </header>
</div>

＆＃13;

＆＃13;

＆＃13;

有关进一步参考，请参阅：
Visual formatting model
Positioning