CSS绝对位置，z-index

这一定很简单，但是我被卡住了。

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

在此背景之上，我需要页面的中间高度为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;
}