Z索引圖像後的文本？

我正在製作一個網站，我有一個橫幅，它只是一個Z-Index爲-1的圖像。它的頂部有兩行文字以及頂部的透明導航欄。有沒有一種方法可以在橫幅下面寫下段落，而不會疊加到圖片上？Z索引圖像後的文本？

<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

來源

2016-05-30 Bradley Simpson

你能張貼在的jsfiddle的例子或粘貼一些示例代碼？如果圖像是塊級別，則後面的段落應該自動顯示在下面。 –

https://jsfiddle.net/ppdermx5/ –

「li」以外的'ul'中的其他子元素是無效的HTML，雖然可以設置樣式，但在任何情況下都不應該使用其他任何東西。另見這篇文章：[允許ul元素的子元素]（http://stackoverflow.com/questions/12242041/allowed-child-elements-of-ul） – AlexG

如果您使用絕對定位，最後除了將在上面顯示。

例如放置左上：

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;' />

如果你想在頁面的其餘部分繼續不使用的位置是：絕對的，你可以保證金增加下一個html對象。否則它將重疊絕對對象。

來源

2016-05-30 08:23:11 Rembunator

沒有一個例子，很難說什麼是確切的問題。

我最好的猜測是你的導航欄包含浮動列表項，沒有應用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>

來源

2016-05-30 08:30:19

Z索引圖像後的文本？

回答

相關問題