Question

这一定非常简单，但我被卡住了。

我有一个标题，下面我有一个绝对定位的完整高度/宽度块。这将是一张地图，但我刚刚使用了一个彩色块来简化它。

除此背景外，我还需要中间高度为100％的页面。我以为我可以使用z-index在绝对定位的背景上显示它，但页面始终位于'bg'div

之后

我知道我错过了一些简单的事情

*{
  margin: 0;
  padding: 0;
}

html, body{
  height: 100%;
}

.header{
  background: black;
  height: 50px;
  width: 100%;
}

.bg{
  background: red;
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
}

.page{
  background: grey;
  height: 100%;
  margin: 0 auto;
  width: 500px;
  z-index: 10;
}

<div class="header"></div>

<div class="bg"></div>

<div class="page"></div>

Answer 1

z-index对静态定位元素没有影响（这是默认值）。它影响相对，绝对和固定（“定位”）元素。常见的黑客方法是将position:relative添加到.page。

Answer 2

要强制使用绝对定位元素进行索引，可以将其用于否定值。

*{
  margin: 0;
  padding: 0;
}

html, body{
  height: 100%;
}

.header{
  background: black;
  height: 50px;
  width: 100%;
}

.bg{
  background: red;
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.page{
  background: grey;
  height: 100%;
  margin: 0 auto;
  width: 500px;
  z-index: 10;
}

<div class="header"></div>

<div class="bg"></div>

<div class="page"></div>

CSS绝对位置，z-index

2 个答案: