html - z-index 仍然被覆盖

Question

我的页脚显示在主内容窗口顶部时遇到了一些问题。

尝试移动边距，使主要内容重叠页眉 100 像素，重叠页脚 100 像素并呈现到窗口底部。

不太确定与“::before”有关的问题是否有其他方法可以做到这一点？

谢谢

#wrapper:before {
  content: '';
  float: left;
  height: 100%;
}

#wrapper {
  height: 100%;
  background-color: black;
}

#header {
  z-index: 1;
  height: 250px;
  text-align: center;
  background: url(../images/bg02.jpg);
  border-bottom: 10px solid #01A9DC;
}

#main {
  z-index: 2;
  margin: -100px auto -50px auto;
  width: 80%;
  background-color: white;
  min-height: 400px;
}

#footer {
  z-index: 1;
  border-top: 10px solid #01A9DC;
  background: url(../images/bg02.jpg);
}

#footer:after {
  z-index: 1;
  content: '';
  display: block;
  clear: both;
}

<div id="wrapper">

  <div id="header"> HEADER<br> </div>

  <div id="main"> MAIN CONTENT </div>

  <div id="footer"></div>

</div>

Answer 1

z-index 有很多小技巧。我认为它大致只适用于某些情况，例如定位(relative 或 absolute)元素或具有 opacity 变化的元素。我通过将 position: relative 添加到您的 #main 元素使您的示例在这里工作。

#wrapper:before {
  content: '';
  float: left;
  height: 100%;
}

#wrapper {
  height: 100%;
  background-color: black;
}

#header {
  z-index: 1;
  height: 250px;
  text-align: center;
  background: url(../images/bg02.jpg);
  border-bottom: 10px solid #01A9DC;
}

#main {
  z-index: 2;
  position: relative;
  margin: -100px auto -50px auto;
  width: 80%;
  background-color: white;
  min-height: 400px;
}

#footer {
  z-index: 1;
  border-top: 10px solid #01A9DC;
  background: url(../images/bg02.jpg);
}

#footer:after {
  z-index: 1;
  content: '';
  display: block;
  clear: both;
}

<div id="wrapper">

  <div id="header"> HEADER<br> </div>

  <div id="main"> MAIN CONTENT </div>

  <div id="footer"></div>

</div>