Overlap Div with Navbar

Navigation
1

Good morning.

I'm using Bootstrap to develop a website and I'm using a Navbar and a Div with an image, but when I enter the navbar and div with the image, the div starts just below the Navbar and that's not what I expected.

Basically what I want and superimpose this image with navbar, that is, make the div start in the upper corner of the screen and navbar too, overlapping the div.

Can anyone help me?

I already tried to use z-index, however I could not set a value that overlaps my div.

Thanks in advance for your help.

Edit: This part of the code is basically this: 

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <a class="navbar-brand" href="index.html">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarMain">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="solu.html">Soluções</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="prod.html">Produtos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="abt.html">Sobre</a>
      </li>
    </ul>
  </div>
</nav>
<div style="min-height: 100vh;width: 100%;background-color: blue">
    <p>Div</p>
</div>

A full screen div and a navbar that has to overlap with it, notice that the text "div" is underneath the navbar, he wanted it "to disappear behind the navbar"

    
asked by anonymous 23.01.2018 / 13:56

1 answer

0

To use z-index its <div> must have position set, in case NavBar has z-index:0 by default , then to play div azul to I put it in position: relative; and z-index: -1; and I used top: -56px; to align it at the top of the page. 

div.azul {
    min-height: 100vh;
    width: 100%;
    background-color: blue;
    top: -56px;
    position: relative;
    z-index: -1;
}


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name=
 content=
>
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
  div.azul {
        min-height: 100vh;
        width: 100%;
        background-color: blue;
        top: -56px;
        position: relative;
        z-index: -1;
        font-size: 70px;
        color: red;
    }
</style>
</head>
<body>
  
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="index.html">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse" id="navbarMain">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="solu.html">Soluções</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="prod.html">Produtos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="abt.html">Sobre</a>
        </li>w
      </ul>
    </div>
  </nav>
  <div class="azul">
      <p>Div</p>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
    
23.01.2018 / 14:43
Save a json file with php inside a bracket and separated by a comma Calculation of jQuery threaded percentage