如何将 html css 导航栏放置在倾斜渐变 header 背景之上？

Question

我的 header 目前有问题。目前我有一个倾斜的渐变作为我的 header 背景图像。每当我尝试在 header 上方放置一个导航栏时，无论我使用哪种设计，我都看不到它。有人可以告诉我如何让导航栏超过这个 header 吗？谢谢

图片：Site with working images

代码：

@import url('https://fonts.googleapis.com/css?family=Montserrat');

.heading {
  display: inline-block;
  font-family: "Montserrat";
  font-weight: lighter;
  text-align: left;
  margin-left: 20vw;
  line-height: 30vw;
}
body{
  width:100%;
  margin:auto;
  font-family: 'Montserrat', sans-serif;
  background-color: white;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin-top: 30px;
  flex-flow: row wrap;
  margin-top: -10vw;
}
img {
 margin: 9px;
 transition: filter 0.2s;
 filter: brightness(100%);
 display: inline-block;
 min-height: 100px;
 height: 50vh;
}
img:hover {
 filter: brightness(80%);
}
.responsive {
}
header {
  position: relative;
  height: 80vh;
  background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
  margin-top: -20px;
  transform: skewY(-5deg);
  transform-origin: top left;
}
.fullwidth {
  width: 100%;
}
.headertitle {
  margin-top: -45vh;
  margin-left: 12vw;
  position: absolute;
  font-size: calc(13px + 2.5vw);
  color: white;
  font-family: 'Montserrat';
  font-weight: lighter;
}
/* navbar */

/* navbar end */

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="pgallerystyles.css">
  <title> Photo Gallery </title>
</head>
<body>
  <div class="fullwidth">
      </div>
<header>
  </header>
    <h1 class="headertitle">Image Gallery</h1>
</div>
<main class="site-wrapper">
  <div class="container">
  <div class="responsive"><img src="img4.jpg"></div>
  <div class="responsive"><img src="img1.jpg"></div>
  <div class="responsive"><img src="img2.jpg"></div>
  <div class="responsive"><img src="img3.jpg"></div>
  <div class="responsive"><img src="img6.jpg"></div>
  <div class="responsive"><img src="img5.jpg"></div>
  <div class="responsive"><img src="img7.jpg"></div>
  <div class="responsive"><img src="img9.jpg"></div>
</div>
</main>
</body>
</html>

Answer 1

您的 <nav> 上需要有一个带有彩色背景的 z-index 属性以使其可见，为此，<nav> 必须有不同的显示值（即 Relative、Absolute、...等）而不是默认的 static 值。

看看这个：

@import url('https://fonts.googleapis.com/css?family=Montserrat');
.heading {
  display: inline-block;
  font-family: "Montserrat";
  font-weight: lighter;
  text-align: left;
  margin-left: 20vw;
  line-height: 30vw;
}

body {
  width: 100%;
  margin: auto;
  font-family: 'Montserrat', sans-serif;
  background-color: white;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin-top: 30px;
  flex-flow: row wrap;
  margin-top: -10vw;
}

img {
  margin: 9px;
  transition: filter 0.2s;
  filter: brightness(100%);
  display: inline-block;
  min-height: 100px;
  height: 50vh;
}

img:hover {
  filter: brightness(80%);
}

.responsive {}

header {
  position: relative;
  height: 80vh;
  background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
  margin-top: -20px;
  transform: skewY(-5deg);
  transform-origin: top left;
}

.fullwidth {
  width: 100%;
}

.headertitle {
  margin-top: -45vh;
  margin-left: 12vw;
  position: absolute;
  font-size: calc(13px + 2.5vw);
  color: white;
  font-family: 'Montserrat';
  font-weight: lighter;
}

/* navbar */
nav {
  background: #fff;
  position: relative;
  z-index: 1;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  list-style: none
}
/* navbar end */

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="pgallerystyles.css">
    <title> Photo Gallery </title>
  </head>

  <body>
    <div class="fullwidth">
    </div>
    <nav>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>
    <header>
    </header>
    <h1 class="headertitle">Image Gallery</h1>
    <main class="site-wrapper">
      <div class="container">
        <div class="responsive"><img src="img4.jpg"></div>
        <div class="responsive"><img src="img1.jpg"></div>
        <div class="responsive"><img src="img2.jpg"></div>
        <div class="responsive"><img src="img3.jpg"></div>
        <div class="responsive"><img src="img6.jpg"></div>
        <div class="responsive"><img src="img5.jpg"></div>
        <div class="responsive"><img src="img7.jpg"></div>
        <div class="responsive"><img src="img9.jpg"></div>
      </div>
    </main>
  </body>

</html>

如何将 html css 导航栏放置在倾斜渐变 header 背景之上？

How to place html css navbar above skewed gradient header background?

html

css

navbar

html-head