Overlapping one Div onto Another - html

Question

I'm trying to get a very specific look for my navigation. I want the background to be a solid image and I want the links to be separated text images that float above it to make it look like a piece. I've got it aligned perfectly, the issue is that I can't get the links to appear above the background. The code is below:
<div id=Navigation>
<div id="NavBar">
<img src="Site Images/Navigation/Nav_BG.png"/>
</div><!--Nav Bar -->
<div id="NavLinks">
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
</div><!-- End of Navlinks -->
</div><!-- End of Navigation Div -->
The CSS is
#Navigation {
height: 810px;
width: 350px;
float: left;
}
#NavBar {
position: absolute;
z: 2; /* What is `z`? */
}
#NavLinks{
float: none;
z: 1; /* What is `z`? */
}
I tried the z attribute but it's not working. I know that something is wrong. The div id="Navigation" must float left, or the div id="content" (not added here) won't be next to it.

Answer 1

Interchange the values of z-index in css of rules
#NavBar
and
#NavLinks

Answer 2

I would delete the background div and set the background with css like this:
HTML:
<div id="nav_links">
</div>
CSS:
#nav_links{
background-image: url('path'); /*Put here the path to your background image*/
}
Maybe if you add more information about your problem I can give you better advice.

Answer 3

I guess the problem is at CSS attribute z that you used. I can find anything about this, so I guess you mean z-index.
Try to change to the CSS below:
#Navigation {
height: 810px;
width: 350px;
float: left;
}
#NavBar {
position: absolute;
z-index: 2 /* `z-index` instead of `z` */
}
#NavLinks{
float: none;
z-index: 1;
}
It should give you the expected result.