Question

所以我要在视差样式的网站上创建一个导航栏，并且希望在导航栏下方的图像顶部显示阴影，但该阴影在图像上方但在图像下方不可见。我将通过以下图片向您展示我的意思：

https://i.stack.imgur.com/GL10W.png

在这里您看到阴影并且没有背景图片...

https://i.stack.imgur.com/QW6kk.png

...但是由于导航栏下方的图像，在这里您不能这样做。

我已经尝试过z-index，但是它不起作用。

有没有一种方法可以使您看到阴影？

在评论中找到

编辑：非常感谢大家！你真的帮了我：）

Answer 1

int()似乎正在破坏它。从position: relative;中删除它会再次显示框阴影。

Answer 2

在z-index上设置.section-nav不会执行任何操作，因为它没有定位。

因此可能的解决方案是（除了杰里米（Jeremy's）也可行）：

像pimg一样，将.nav-section设置为position: relative，这样可以使自己的z-index工作。
或将.pimg1和.pimg2的z索引设置为-1，以使其位于导航区的后面。

@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:300,400,600,900');


/* ---------- GLOBAL STYLES ---------- */

* {margin: 0; padding: 0; box-sizing: border-box;}

body {
	height: 100%;
	font-family: 'Libre Franklin', 'Helvetica Neue', helvetica, arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 21px;
	color: #222;
}

.wrapper {
	width: 72%;
	max-width: 1000px;
	margin: auto;
}

.section {
	padding: 30px 50px;
}

.section-light {
	background-color: #fff;
}

.section-dark {
	background-color: #222;
	color: #fff;
}


/* ---------- NAVIGATION STYLES ---------- */

.section-nav {
	z-index: 99;
	padding: 0;
	border-bottom: 1px solid #767676;
	box-shadow: 0px -20px 300px rgba(0, 0, 0, 1);
}

.section-nav ul {
	display: block;
	height: 72px;
	display: flex;
	align-items: center;
}

.section-nav ul li {
	text-align: left;
	display: inline-block;
	margin-right: 37px;
}

.section-nav ul li a {
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	color: #222;
}

.section-nav ul li a.active {
	color: #767676;
}

.pimg1, .pimg2 {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	z-index: -1;    /* changed */
}

.pimg1 {
	background-image: url('https://i.ibb.co/D9D8mZq/img1.jpg');
	min-height: 100vh;
}

.pimg2 {
	background-image: url('https://i.ibb.co/n6J2pTs/img2.jpg');
	min-height: 100vh;
}

<!DOCTYPE html>
<body>
	
	<div class="pimg1"></div>

	<section class="section section-light section-nav">
		<div class="wrapper">
			<ul>
				<li><a href="/" class="active">Home</a></li>
				<li><a href="blog.html">Blog</a></li>
				<li><a href="projekt.html">Das Projekt</a></li>
				<li><a href="kontakt.html">Kontakt</a></li>
			</ul>
		</div>
	</section>

	<div class="pimg2"></div>

	<section class="section section-light">
		<h2>Section 2</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa aliquid natus, consequuntur quasi dolorum, mollitia corrupti reprehenderit molestiae sequi ipsa quod minima, ullam saepe recusandae commodi nostrum obcaecati adipisci rerum atque omnis labore. Voluptatum quasi laborum ut cupiditate est ea, sequi tempora mollitia repudiandae autem nulla neque tenetur voluptate ducimus laudantium.
		</p>
	</section>

</body>

Answer 3

您应该将此样式添加到.section-nav

position: relative;

这是更新的样式：

.section-nav {
    z-index: 99;
    padding: 0;
    border-bottom: 1px solid #767676;
    box-shadow: 0 0 0.3em #333;
  position: relative;
}

我也更改了box-shadow属性，以便可以看到阴影。您的一个我看不见。

并链接到fiddle

框阴影不会显示在背景图片上方

3 个答案: