即使z-index值較低，div也會覆蓋在其他元素之上

我有一個低z值的div覆蓋圖。但即使當我將更高的Z-index值應用於其他內容時，疊加層總是處於最高位置，當我想要的是將其置於我的背景之上時。即使z-index值較低，div也會覆蓋在其他元素之上

這裏是我的標記：

* { 
 
    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 
 
\t    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 
 
\t     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 
 
\t      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 
 
\t      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 
 
\t      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 
 
\t       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 
 
\t       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 
 
\t       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 
 
\t       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

來源

2017-09-28 scroobius

你可以發佈你的代碼的jsfiddle這將有助於找到解決的辦法。 –

'z-index'只適用於不是'static'的元素（所以只適用於'position：relative | absolute | fixed'元素） – LinkinTED

@MerajKhan這裏是jsfiddle - [JsFiddle]（https：// jsfiddle。 net/j46kzfv2/4 /）。 – scroobius

添加

position: relative

與z-index的所有元素，因爲靜態的位置元素不能覆蓋

來源

2017-09-28 11:44:09 NoOorZ24

我申請的位置：相對於各種元素，但這不起作用 – scroobius

你覆蓋的Z-index值設置爲10。這導致問題似乎。檢查下面的片段（我從小提琴手繼承）以供參考。

$(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 
 
\t    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 
 
\t     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 
 
\t      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 
 
\t      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 
 
\t      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 
 
\t       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 
 
\t       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 
 
\t       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 
 
\t       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>

來源

2017-09-28 12:00:04

對不起，但我想用覆蓋使圖片變暗。但其他元素應該位於疊加層之上。你的修改把覆蓋層放在其他的東西的後面 – scroobius

即使z-index值較低，div也會覆蓋在其他元素之上

回答

相關問題