Unable to overlay my navigation bar over the title page background - html

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

Answer 2

Are you able to use z-index to achieve this? Without an example to see it's a little tough. The z-index property specifies the stack order of an element (think of bring forward or backward).
Try something like this:
.Nav {
z-index:
}
If that doesn't bring the .Nav forward, try adding this as well:
.Title-Page {
z-index: -1;
}
You may have to adjust the #'s to get the best result. The higher the #, the closer it is to you.
Note: Position could also need adjusting here. Best to put this into something like codepen if the above doesn't work and post that link.