覆盖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不显示背景颜色

回答

相关问题