我有一个低z-index值的div叠加层。但即使我将更高的z-index值应用于我的其他内容，叠加也始终位于顶部，当我想要的只是它在我的背景上时。
这是我的标记：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
body {
font-family: 'Open Sans', serif;
}
.section {
/* the imp ortant one*/
/* background-attachment: fixed;*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100%;
z-index: 15;
}
#section1 {
background-image: url("../images/main_background.png");
}
#section2 {
background-image: url("../images/auction_background.png");
}
#section3 {
background-image: url("../images/convention_background.png");
}
#section4 {
background-image: url("../images/exhibition_background.png")
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.8);
}
.topbar {
position: fixed;
display: flex;
justify-content: flex-end;
z-index: 15;
width: 100%;
}
.social-icons span {
display: inline-block;
position: relative;
bottom: 1em;
}
.social-icons * {
margin-left: 0.5em
}
.social-icons {
margin: 5em;
}
.social-icons li {
display: inline-block;
}
.social-icons svg {
fill: rgba( 255, 255, 255, 0.7);
width: 50px;
}
.logo {
/* margin: 10em;*/
z-index: 13;
width: 100%;
}
.logo img {
display: block;
width: 70em;
margin: 0 auto;
margin-top: 10em;
}
.coming-soon {
z-index: 15;
font-size: 5rem;
text-align: center;
margin-top: 1em
}
.coming {
font-weight: lighter;
}
.soon {
font-weight: bolder;
}
.keep {
text-align: center;
margin-top: 1em;
}
.text-block {
width: 50em;
margin-left: 25em;
margin-top: 15em;
}
.title {
font-size: 5rem;
}
.text-block p {
margin-top: 1em;
font-size: 2rem;
font-weight: 100;
}
.text-block span {
font-weight: 900;
}
.email-input {
height: 4em;
width: 30em;
border-color: white;
/* background: black;*/
border-radius: 20em;
margin: 0 auto;
}
.navigation {
position: fixed;
width: 100%;
}
.email-input input {
width: inherit;
height: inherit;
text-align: center;
border-radius: 20em;
background-color: transparent;<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="topbar">
<ul class="social-icons">
<span>Find us on</span>
<li>
<a class="icons" href="#">
<svg version="1.1" id="Facebook_w_x2F__circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,0.4c-5.302,0-9.6,4.298-9.6,9.6s4.298,9.6,9.6,9.6s9.6-4.298,9.6-9.6S15.302,0.4,10,0.4z M12.274,7.034h-1.443
c-0.171,0-0.361,0.225-0.361,0.524V8.6h1.805l-0.273,1.486H10.47v4.461H8.767v-4.461H7.222V8.6h1.545V7.726
c0-1.254,0.87-2.273,2.064-2.273h1.443V7.034z"/>
</svg></a>
</li>
<li>
<a class="icons" href="#">
<svg id="Instagram_w_circle" data-name="Instagram w/circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.19995 19.19995"><title>instagram-with-circle</title><path d="M13.89777,7.05115a1.65591,1.65591,0,0,0-.94891-0.94891,2.76589,2.76589,0,0,0-.92841-0.17218C11.49316,5.906,11.33508,5.90094,10,5.90094S8.50684,5.906,7.97955,5.93005a2.76589,2.76589,0,0,0-.92841.17218,1.65591,1.65591,0,0,0-.94891.94891,2.76589,2.76589,0,0,0-.17218.92841C5.906,8.50684,5.90094,8.665,5.90094,10s0.00507,1.49316.02911,2.02045a2.76553,2.76553,0,0,0,.17218.92841,1.65591,1.65591,0,0,0,.94891.94891,2.76589,2.76589,0,0,0,.92841.17218c0.52716,0.024.6853,0.02911,2.02045,0.02911s1.49329-.00507,2.02045-0.02911a2.76589,2.76589,0,0,0,.92841-0.17218,1.65591,1.65591,0,0,0,.94891-0.94891,2.76553,2.76553,0,0,0,.17218-0.92841c0.024-.52728.02911-0.68536,0.02911-2.02045S14.094,8.50684,14.06995,7.97955A2.76589,2.76589,0,0,0,13.89777,7.05115ZM10,12.56757A2.56757,2.56757,0,1,1,12.56757,10,2.56756,2.56756,0,0,1,10,12.56757ZM12.669,7.931a0.6,0.6,0,1,1,.6-0.6A0.6,0.6,0,0,1,12.669,7.931Z" transform="translate(-0.40002 -0.40002)"/><circle cx="9.59998" cy="9.59998" r="1.66669"/><path d="M10,0.4A9.6,9.6,0,1,0,19.6,10,9.59995,9.59995,0,0,0,10,.4Zm4.96991,11.6615a3.67039,3.67039,0,0,1-.23242,1.21368,2.55612,2.55612,0,0,1-1.46228,1.46228,3.67039,3.67039,0,0,1-1.21368.23242C11.5282,14.99426,11.35791,15,10,15s-1.5282-.00574-2.06152-0.03009a3.67039,3.67039,0,0,1-1.21368-.23242,2.55612,2.55612,0,0,1-1.46228-1.46228,3.67039,3.67039,0,0,1-.23242-1.21368C5.00574,11.5282,5,11.35791,5,10s0.00574-1.5282.03009-2.06152a3.67039,3.67039,0,0,1,.23242-1.21368A2.55612,2.55612,0,0,1,6.72479,5.26251a3.67039,3.67039,0,0,1,1.21368-.23242C8.4718,5.00574,8.64209,5,10,5s1.5282,0.00574,2.06152.03009a3.67039,3.67039,0,0,1,1.21368.23242,2.55612,2.55612,0,0,1,1.46228,1.46228,3.67039,3.67039,0,0,1,.23242,1.21368C14.99426,8.4718,15,8.64209,15,10S14.99426,11.5282,14.96991,12.06152Z" transform="translate(-0.40002 -0.40002)"/></svg>
</a>
</li>
<li>
<a class="icons" href="#">
<svg version="1.1" id="Twitter_w_x2F__circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,0.4c-5.302,0-9.6,4.298-9.6,9.6s4.298,9.6,9.6,9.6s9.6-4.298,9.6-9.6S15.302,0.4,10,0.4z M13.905,8.264
c0.004,0.082,0.005,0.164,0.005,0.244c0,2.5-1.901,5.381-5.379,5.381c-1.068,0-2.062-0.312-2.898-0.85
c0.147,0.018,0.298,0.025,0.451,0.025c0.886,0,1.701-0.301,2.348-0.809c-0.827-0.016-1.525-0.562-1.766-1.312
c0.115,0.021,0.233,0.033,0.355,0.033c0.172,0,0.34-0.023,0.498-0.066c-0.865-0.174-1.517-0.938-1.517-1.854V9.033
C6.257,9.174,6.549,9.26,6.859,9.27C6.351,8.93,6.018,8.352,6.018,7.695c0-0.346,0.093-0.672,0.256-0.951
c0.933,1.144,2.325,1.896,3.897,1.977c-0.033-0.139-0.049-0.283-0.049-0.432c0-1.043,0.846-1.891,1.891-1.891
c0.543,0,1.035,0.23,1.38,0.598c0.431-0.086,0.835-0.242,1.2-0.459c-0.141,0.441-0.44,0.812-0.831,1.047
c0.383-0.047,0.747-0.148,1.086-0.299C14.595,7.664,14.274,7.998,13.905,8.264z"/>
</svg>
</a>
</li>
</ul>
</div>
<div id="pagepiling">
<!-- <div class="overlay"></div>-->
<div class="section" id="section1">
<div class="logo">
<img src="./images/auction_logo.png" alt="">
</div>
<div class="coming-soon">
<span class="coming">Coming</span> <span class="soon">Soon</span>
</div>
<div class="keep"><span>Keep in touch</span></div>
</div>
<div class="section" id="section2">
<div class="text-block">
<h1 class="title">Auction</h1>
<p><span>A full service dealer </span>and public auto auction.Experience the thrill of bidding and also tak advantage of available bargains on your next vehicle purchase</p>
</div>
</div>
<div class="section" id="section3">
<div class="text-block">
<h1 class="title">
Convention
</h1>
<p>
<span> A dynamic platform</span> for Business to Business and Business to Consumer relations, featuring the largest gathering of stakeholders in the automotive industry in Abuja.
</p>
</div>
</div>
<div class="section" id="section4">
<div class="text-block">
<h1 class="title">
Exhibition
</h1>
<p>
<span> A wide range</span> of exhibitors from all sectors of the automotive industry displaying products and services for direct marketing and service engagement opportunities
</p>
</div>
</div>
</div>
</body>
</html>
我正在使用java脚本库 - pagepiling.js，虽然我看不出这会如何影响我的标记。这是jsfiddle JsFiddle
答案 0 :(得分：0)
添加
position: relative
使用z-index的所有元素，因为具有静态位置的元素无法覆盖
答案 1 :(得分：0)
您的叠加层的z-index设置为10.这会导致问题出现。检查下面的片段（我从fiddler继承）以供参考。
$(document).ready(function() {
$('#pagepiling').pagepiling({
verticalCentered: false,
css3: true,
});
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
body {
font-family: 'Open Sans', serif;
/* position: relative;*/
}
.section {
/* the imp ortant one*/
/* background-attachment: fixed;*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100%;
z-index: 15;
}
#section1 {
background-image: url("https://imgur.com/aeKw80J.png");
}
#section2 {
background-image: url("https://imgur.com/dnVZlHW.png");
}
#section3 {
background-image: url("https://imgur.com/wcmCU0Z.png");
}
#section4 {
background-image: url("https://imgur.com/mhVSOZx.png")
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgba(0, 0, 0, 0.8);
}
.topbar {
position: fixed;
display: flex;
justify-content: flex-end;
z-index: 15;
width: 100%;
}
.social-icons span {
display: inline-block;
position: relative;
bottom: 1em;
}
.social-icons * {
margin-left: 0.5em
}
.social-icons {
margin: 5em;
}
.social-icons li {
display: inline-block;
}
.social-icons svg {
fill: rgba( 255, 255, 255, 0.7);
width: 50px;
}
.logo {
/* margin: 10em;*/
z-index: 13;
width: 100%;
}
.logo img {
display: block;
width: 70em;
margin: 0 auto;
margin-top: 10em;
}
.coming-soon {
z-index: 15;
font-size: 5rem;
text-align: center;
margin-top: 1em
}
.coming {
font-weight: lighter;
}
.soon {
font-weight: bolder;
}
.keep {
text-align: center;
margin-top: 1em;
}
.text-block {
width: 50em;
margin-left: 25em;
margin-top: 15em;
}
.title {
font-size: 5rem;
}
.text-block p {
margin-top: 1em;
font-size: 2rem;
font-weight: 100;
}
.text-block span {
font-weight: 900;
}
.email-input {
height: 4em;
width: 30em;
border-color: white;
border-radius: 20em;
margin: 0 auto;
}
.navigation {
position: fixed;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.4/jquery.pagepiling.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.4/jquery.pagepiling.min.css" rel="stylesheet" />
<body>
<div class="topbar">
<ul class="social-icons">
<span>Find us on</span>
<li>
<a class="icons" href="#">
<svg version="1.1" id="Facebook_w_x2F__circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,0.4c-5.302,0-9.6,4.298-9.6,9.6s4.298,9.6,9.6,9.6s9.6-4.298,9.6-9.6S15.302,0.4,10,0.4z M12.274,7.034h-1.443
c-0.171,0-0.361,0.225-0.361,0.524V8.6h1.805l-0.273,1.486H10.47v4.461H8.767v-4.461H7.222V8.6h1.545V7.726
c0-1.254,0.87-2.273,2.064-2.273h1.443V7.034z"/>
</svg></a>
</li>
<li>
<a class="icons" href="#">
<svg id="Instagram_w_circle" data-name="Instagram w/circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.19995 19.19995"><title>instagram-with-circle</title><path d="M13.89777,7.05115a1.65591,1.65591,0,0,0-.94891-0.94891,2.76589,2.76589,0,0,0-.92841-0.17218C11.49316,5.906,11.33508,5.90094,10,5.90094S8.50684,5.906,7.97955,5.93005a2.76589,2.76589,0,0,0-.92841.17218,1.65591,1.65591,0,0,0-.94891.94891,2.76589,2.76589,0,0,0-.17218.92841C5.906,8.50684,5.90094,8.665,5.90094,10s0.00507,1.49316.02911,2.02045a2.76553,2.76553,0,0,0,.17218.92841,1.65591,1.65591,0,0,0,.94891.94891,2.76589,2.76589,0,0,0,.92841.17218c0.52716,0.024.6853,0.02911,2.02045,0.02911s1.49329-.00507,2.02045-0.02911a2.76589,2.76589,0,0,0,.92841-0.17218,1.65591,1.65591,0,0,0,.94891-0.94891,2.76553,2.76553,0,0,0,.17218-0.92841c0.024-.52728.02911-0.68536,0.02911-2.02045S14.094,8.50684,14.06995,7.97955A2.76589,2.76589,0,0,0,13.89777,7.05115ZM10,12.56757A2.56757,2.56757,0,1,1,12.56757,10,2.56756,2.56756,0,0,1,10,12.56757ZM12.669,7.931a0.6,0.6,0,1,1,.6-0.6A0.6,0.6,0,0,1,12.669,7.931Z" transform="translate(-0.40002 -0.40002)"/><circle cx="9.59998" cy="9.59998" r="1.66669"/><path d="M10,0.4A9.6,9.6,0,1,0,19.6,10,9.59995,9.59995,0,0,0,10,.4Zm4.96991,11.6615a3.67039,3.67039,0,0,1-.23242,1.21368,2.55612,2.55612,0,0,1-1.46228,1.46228,3.67039,3.67039,0,0,1-1.21368.23242C11.5282,14.99426,11.35791,15,10,15s-1.5282-.00574-2.06152-0.03009a3.67039,3.67039,0,0,1-1.21368-.23242,2.55612,2.55612,0,0,1-1.46228-1.46228,3.67039,3.67039,0,0,1-.23242-1.21368C5.00574,11.5282,5,11.35791,5,10s0.00574-1.5282.03009-2.06152a3.67039,3.67039,0,0,1,.23242-1.21368A2.55612,2.55612,0,0,1,6.72479,5.26251a3.67039,3.67039,0,0,1,1.21368-.23242C8.4718,5.00574,8.64209,5,10,5s1.5282,0.00574,2.06152.03009a3.67039,3.67039,0,0,1,1.21368.23242,2.55612,2.55612,0,0,1,1.46228,1.46228,3.67039,3.67039,0,0,1,.23242,1.21368C14.99426,8.4718,15,8.64209,15,10S14.99426,11.5282,14.96991,12.06152Z" transform="translate(-0.40002 -0.40002)"/></svg>
</a>
</li>
<li>
<a class="icons" href="#">
<svg version="1.1" id="Twitter_w_x2F__circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,0.4c-5.302,0-9.6,4.298-9.6,9.6s4.298,9.6,9.6,9.6s9.6-4.298,9.6-9.6S15.302,0.4,10,0.4z M13.905,8.264
c0.004,0.082,0.005,0.164,0.005,0.244c0,2.5-1.901,5.381-5.379,5.381c-1.068,0-2.062-0.312-2.898-0.85
c0.147,0.018,0.298,0.025,0.451,0.025c0.886,0,1.701-0.301,2.348-0.809c-0.827-0.016-1.525-0.562-1.766-1.312
c0.115,0.021,0.233,0.033,0.355,0.033c0.172,0,0.34-0.023,0.498-0.066c-0.865-0.174-1.517-0.938-1.517-1.854V9.033
C6.257,9.174,6.549,9.26,6.859,9.27C6.351,8.93,6.018,8.352,6.018,7.695c0-0.346,0.093-0.672,0.256-0.951
c0.933,1.144,2.325,1.896,3.897,1.977c-0.033-0.139-0.049-0.283-0.049-0.432c0-1.043,0.846-1.891,1.891-1.891
c0.543,0,1.035,0.23,1.38,0.598c0.431-0.086,0.835-0.242,1.2-0.459c-0.141,0.441-0.44,0.812-0.831,1.047
c0.383-0.047,0.747-0.148,1.086-0.299C14.595,7.664,14.274,7.998,13.905,8.264z"/>
</svg>
</a>
</li>
</ul>
</div>
<div id="pagepiling">
<div class="overlay"></div>
<div class="section" id="section1">
<div class="logo">
<img src="https://imgur.com/GgfKM8n.png" alt="">
</div>
<div class="coming-soon">
<span class="coming">Coming</span> <span class="soon">Soon</span>
</div>
<div class="navigation">
<div class="keep"><span>Keep in touch</span></div>
<!-- <input type="text">-->
</div>
</div>
<div class="section" id="section2">
<div class="text-block">
<h1 class="title">Auction</h1>
<p><span>A full service dealer </span>and public auto auction.Experience the thrill of bidding and also tak advantage of available bargains on your next vehicle purchase</p>
</div>
</div>
<div class="section" id="section3">
<div class="text-block">
<h1 class="title">
Convention
</h1>
<p>
<span> A dynamic platform</span> for Business to Business and Business to Consumer relations, featuring the largest gathering of stakeholders in the automotive industry in Abuja.
</p>
</div>
</div>
<div class="section" id="section4">
<div class="text-block">
<h1 class="title">
Exhibition
</h1>
<p>
<span> A wide range</span> of exhibitors from all sectors of the automotive industry displaying products and services for direct marketing and service engagement opportunities
</p>
</div>
</div>