文字覆盖图像，导航栏“在”图像下方

Question

我正在尝试在图片和临时navbar上获取标题。 z-index没用，我已经尝试了很多其他的事情。

CSS

.text {
  text-align: center;
  color: red;
  font-family: fantasy;
  font-size: 120px;
  z-index: 1;
}

.image {
  position: relative;
  z-index: -1;
}

.nav {
  height: 35px;
  width: 900px;
  background: #72a0c1;
  margin: auto;
  z-index: 2;
}

.nav ul {
  margin: 0;
  padding: 0;
}

.nav ul li {
  list-style: none;
}

.nav ul li a {
  text-decoration: none;
  float: left;
  display: block;
  padding: 0px 50px;
  font-family: fantasy;
  font-size: 30px;
}

Fiddle

Answer 1

将absolute而不是relative提供给图片类。

的CSS：

.image {
    position: absolute;
    top: 0;
    z-index: -1;
}

<强> Working Fiddle

注意： Post your sample code in SO. Don't post link here。

Answer 2

尝试在css中使用可能会帮到你

.image {
    position: relative;
}
.text {
    top: 0;
    z-index:1;
}

.nav {
    position: absolute;
    top: 0;
    z-index: 1;
}