叠加div不显示背景颜色

Question

我有两个div。一个包含导航栏，另一个是站点的第一部分。两者都有背景图片和内容。当内容存在时，导航栏的背景未显示。我希望导航栏位于该部分的顶部，这就是为什么我有z-index：2。即使我删除了它，背景颜色也不会出现。 我在各方面都进行了检查，但无论我做什么都没有显示出来。

这是navbar 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>

Answer 1

Z-index仅适用于定位元素，因此为元素提供相对位置应该可以使它起作用。

截至： https://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

可能不会使用职位。

String

Integer

Answer 3

要设置z-index属性的元素将其position属性设置为static。 z-index要求将元素的位置设置为静态以外的任何值 - 这是默认值。

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

Answer 4

您的section-1是section的孩子。孩子总是高于他们的父母。 z-index（BTW仅在定位元素上有效/有效）不会改变它。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;