Z索引图像后的文本？答案

【问题标题】：Text After a Z-Index Image?Z索引图像后的文本？
【发布时间】：2016-05-30 08:19:21
【问题描述】：

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

<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

【问题讨论】：

您可以在 JSFiddle 中发布示例或粘贴一些示例代码吗？如果图像是块级的，则后续段落应自动显示在下方。
jsfiddle.net/ppdermx5
ul 中除li 之外的其他子元素是无效的 HTML，尽管可以设置样式，但在任何情况下都不应使用其他任何内容。另见这篇文章：Allowed child elements of ul

标签： html css z-index banner

【解决方案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 对象添加边距。否则会与绝对对象重叠。

【讨论】：

【解决方案2】：

没有一个例子，很难说确切的问题是什么。

我最好的猜测是您的导航栏包含浮动列表项，它们没有应用 clearfix。这将使它的高度为零，这意味着后续段落将略微重叠。

尝试创建一个 clearfix CSS 类并将其添加到您的导航栏。

类似的东西：

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

适用于：

<nav class="clearfix"></nav>
<p>Extra text</p>

【讨论】：