CODEWITHSUNDEEP
htmlcss
Spirit_Scarlet
Spirit_Scarlet

Reputation: 327

Overlay div not showing background color

I have two div. One contains the navbar and the other is the first section of the site. Both have background images and content. The background of the navbar isn't showing while the content is there. I wanted the navbar to be on top of the section and that is why I have z-index:2. The thing is even if I remove that, the background-color doesn't appear. I inspected it every way but whatever I do it is simply not showing.

This is the navbar css: 

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

   }

This is the section css:

    #section-1{

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


    }

Here is the 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>

Upvotes: 0

Views: 1652

Answers (4)

Johannes
Johannes

Reputation: 67778

Your section-1 is a child of section. Children will always be above their parents. A z-index (which BTW is only active/valid on positioned elements) won't ever change that.

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

Upvotes: 1

Farooq Hanif
Farooq Hanif

Reputation: 1899

the element on which you are setting z-index property has its position property set to static. z-index requires the element's position set to anything except static - which is the default.

take a look here: https://developer.mozilla.org/en/docs/Web/CSS/z-index?v=control

Upvotes: 1

Monkey_Dev1400
Monkey_Dev1400

Reputation: 944

probably do to you not using positions.

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

Upvotes: 1

Sensoray
Sensoray

Reputation: 2430

Z-index only works on positioned elements, so giving your elements a position of relative should make it work.

As of: https://www.w3schools.com/cssref/pr_pos_z-index.asp

Upvotes: 1

Related Questions