图片上的文字，导航栏 "under" 图片

Question

我正试图在图像和临时 navbar 上获得 header。 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 给图像 class。

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;
}

图片上的文字，导航栏 "under" 图片

Text over image, navbar "under" image

html

css

z-index