我目前的标题有问题。目前我有一个倾斜的渐变作为我的标题背景图像。每当我尝试在这个标题上方放置一个导航栏时，无论我使用哪种设计，我都看不到它。有人可以告诉我如何使导航栏位于此标题上方吗？ 谢谢
代码:
@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>最佳答案
您需要有一个 z-index您的属性(property)<nav>使用彩色背景使其可见，为此，<nav>必须具有不同的显示值(即 Relative 、 Absolute ……等)而不是默认值 static值(value)。
检查一下:
@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 - 如何将 html css 导航栏放置在倾斜的渐变标题背景之上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55094670/