覆蓋div不顯示背景顏色

我有兩個div。一個包含導航欄，另一個是該網站的第一部分。兩者都有背景圖片和內容。當內容在那裏時，導航欄的背景沒有顯示。我希望導航欄位於該部分的頂部，這就是爲什麼我有z-index：2。即使我刪除它，背景顏色也不會出現。我以任何方式檢查它，但無論我做什麼，它都根本沒有顯示。覆蓋div不顯示背景顏色

這是導航欄的CSS：

#section{ 
height: 70px; 
z-index: 2; 
padding-left: 10%; 
padding-right: 10%; 
clear: both; 
max-width: 100%; 
background-color: black; 

    }

這是部分的CSS：

#section-1{ 

background: url(Images/1.jpg); 
max-width: 100%; 
padding-top:14%; 
padding-bottom: 7%; 
color:white; 
height:710px; 
margin-top:-70px; 


    }

下面是HTML：

 <div id="section"> <!-- navigation bar --> 
    <div class="navbar" id="nav"> 
     <a href="#">Home</a> 
     <a href="#">Contact</a> 

</div>

<div id="section-1"> <!-- first --> 

    <div class="row"></div></div></div>

來源

2017-06-02 Spirit_Scarlet

可否請您提供HTML呢？ – Tanner

請提供[**最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve）。 – hungerstar

Z索引只適用於定位元素，所以給你的元素一個相對的位置應該使其工作。

由於： https://www.w3schools.com/cssref/pr_pos_z-index.asp

來源

2017-06-02 20:46:53

它工作，但如果我想要固定導航欄，那我該怎麼做？我打算使用職位：固定的。 –

您仍然可以使用固定位置，只是第一部分需要有一個保證金頂部才能將其壓低。 –

可能對你做不使用位置。

#section { 
 
    position: relative; 
 
    height: 70px; 
 
    z-index: 2; 
 
    padding-left: 10%; 
 
    padding-right: 10%; 
 
    clear: both; 
 
    max-width: 100%; 
 
    background-color: black; 
 
} 
 

 
#section-1 { 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 50%; 
 
    height: 50%; 
 
    background-color: red; 
 
    opacity: 0.6; 
 
}

<div id="section"> 
 
    <div id="section-1"></div> 
 
</div>

來源

2017-06-02 20:49:57

在其上設置的z-index屬性的元素都有位置屬性設置爲靜態的。 z-index要求元素的位置設置爲除靜態以外的任何位置 - 這是默認值。

看看這裏： https://developer.mozilla.org/en/docs/Web/CSS/z-index?v=control

來源

2017-06-02 20:50:03 user3051475

你section-1是section一個孩子。孩子將永遠是以上的他們的父母。 z-index（BTW僅對定位元素有效/有效）不會改變這種情況。

#section { 
 
    height: 70px; 
 
    z-index: 2; 
 
    padding-left: 10%; 
 
    padding-right: 10%; 
 
    clear: both; 
 
    max-width: 100%; 
 
    background-color: black; 
 
} 
 

 
#section-1 { 
 
    background: url(http://placehold.it/300x200/eb6); 
 
    max-width: 100%; 
 
    padding-top: 14%; 
 
    padding-bottom: 7%; 
 
    color: white; 
 
    height: 710px; 
 
    margin-top: -70px; 
 
}

<div id="section"> 
 
    <!-- navigation bar --> 
 
    <div class="navbar" id="nav"> 
 
    <a href="#">Home</a> 
 
    <a href="#">Contact</a> 
 

 
    </div> 
 

 
    <div id="section-1"> 
 
    <!-- first --> 
 

 
    <div class="row"></div> 
 
    </div> 
 
</div>

來源

2017-06-02 20:54:07 Johannes

覆蓋div不顯示背景顏色

回答

相關問題