Question

我正在创建一个网站，我有一个横幅，它只是一个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

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对象添加边距。否则它将与绝对对象重叠。

Answer 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>

Z-Index图像后的文字？

2 个答案: