Unable to overlay my navigation bar over the title page background

Question

I'm teaching myself html and css whilst at uni.

I'm trying to make a one page website, and am struggling trying to later the navigation bar over the title page. As eventually, i want the navigation bar to be mainstay on each page (which will be completed later in the project via javascript).

Can anyone point me in the right direction? I've attached some of the css code below.

Cheers

@import url('https://fonts.googleapis.com/css?family=Poiret+One');

a:link {
    text-decoration: none;
}

a:visited {
    color: white;
}

.Nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-family: Poiret One;
}
.Nav li{
    display:inline;
    padding: 40px;
}
.Nav a{
    display:inline-block;
    padding:15px;
}

.Title-Page {
  background-image: url("Images/Campeche.jpg");
  background-size: cover;
  padding: 200px 0 260px 0;
  height: 600px;
  margin: 0;
}

Answer 1

You need a position and a z-index to make this happen. You have to have the position for z-index to work. So here are 2 examples just remember to have your pages set up the same with a position but a lower z-index this will place the page below the nav bar. Hope it helps.

If you want it fixed while the page scrolls behind it.

.Nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family: Poiret One;
position:fixed;
z-index:90

}

If You want the Nav bar to scroll with the page.

.Nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family: Poiret One; 
position:absolute;
z-index:90
}

Title Page with the position set and a lower z-index.

.Title-Page {
background-image: url("Images/Campeche.jpg");
background-size: cover;
padding: 200px 0 260px 0;
height: 600px;
margin: 0;
position:absolute;
z-index:50;    
}