Text After a Z-Index Image? - html

Question

I'm making a website and I have a banner which is just an image with a Z-Index of -1. It has 2 lines of text over the top of it as well as the transparent navigation bar at the top. Is there a way to write a paragraph underneath the banner without it overlaying onto the image?
JSFiddle
<ul class="Nav">
<div class="Logo">
<img src="Logo.png">
</div>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
<ul class="Banner">
<div class="Banner">
<img class="Banner-Image" src="Img/Banner1.jpg">
<div class="Title">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>BradTech</h1>
<p>Professional Website Development and Graphic Design</p>
</div></div>
</ul>
<ul class="Text">
<p>I want this paragraph underneath.</p>
Body {
font-family: 'Arial', Serif;
margin: 0;
padding: 0;
}
.nav {
color: #000000;
list-style: none;
text-align: right;
padding: 20px 0 0 0;
z-index: 1;
}
.nav > li {
display: inline-block;
padding: 0 25px 0 25px;
font-size: 17px;
}
.nav > li > a {
text-decoration: none;
color: #000000;
}
.nav > li > a:hover {
color: #666666;
}
.Logo {
float: left;
padding-left: 25px
}
.Banner {
padding: 0;
margin: 0;
width: 100%;
display: block;
}
.Banner > .Banner-Image {
width: 100%;
display: block;
position: absolute;
z-index: -1;
top: 0;
}
.Title {
text-align: center;
}
.Title > h1 {
font-size: 60px;
}
.Text {
position: relative;
z-index: -1;
}
What the website looks like

Answer 1

If you use absolute positioning, the last addition will be shown on top.
for example to place top left:
style='position:absolute;left:0px;top:0px;'
html example:
<p style='position:absolute;left:0px;top:0px;'>
foo
</p>
<img src='bar.png' style='position:absolute;left:0px;top:0px;' />
If you want the rest of the page to continue without using position:absolute, you could add a margin to the next html object. Otherwise it will overlap the absolute objects.

Answer 2

Without an example, it's difficult to say what the exact problem is.
My best guess would be that your navigation bar contains floated list items, that don't have a clearfix applied. This would give it a zero height, meaning a subsequent paragraph would overlap slightly.
Try creating a clearfix CSS class and adding it to your nav bar.
Something along the lines of:
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
Applied like:
<nav class="clearfix"></nav>
<p>Extra text</p>