Question

我的主页内容窗口上显示我的页脚有点问题。

尝试移动边距，使主要内容超过标题100px，然后将页脚重叠100px并渲染到窗口底部。

不确定是否可以使用“:: 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>

Answer 2

Z-Index很奇怪。 CSS属性position在z-index的工作方式中起着重要作用。

如果您将position: relative;添加到#main，您将看到所需的效果。

我想说使用不同的位置和z索引（以及嵌套这些元素），你会很快发现它有多奇怪。

z-index仍然被覆盖

2 个答案: