html - Z-Index 图像后的文本？

Question

我正在制作一个网站，我有一个横幅，它只是一张 Z-Index 为 -1 的图像。它的顶部有 2 行文本以及顶部的透明导航栏。有没有一种方法可以在横幅下方写一个段落，而不会将其覆盖到图像上？

JSFiddle

<ul class="Nav">
    <div class="Logo">
        <img src="Logo.png">
    </div>
    <li><a href="Home.html">Home</a></li>
    <li><a href="Services.html">Services</a></li>
    <li><a href="Portfolio.html">Portfolio</a></li>
    <li><a href="Contact.html">Contact Me</a></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

如果使用绝对定位，最后添加的内容会显示在最上面。

例如放置在左上角:

style='position:absolute;left:0px;top:0px;'

html 示例:

<p style='position:absolute;left:0px;top:0px;'>
 foo 
</p> 
<img src='bar.png' style='position:absolute;left:0px;top:0px;' />

如果您希望页面的其余部分在不使用 position:absolute 的情况下继续显示，您可以为下一个 html 对象添加边距。否则它将与绝对对象重叠。