Текст после изображения Z-Index?

Я делаю веб-сайт, и у меня есть баннер, который представляет собой только изображение с Z-индексом -1. Он имеет 2 строки текста поверх него, а также прозрачную панель навигации вверху. Есть ли способ написать абзац под баннером без наложения на изображение?Текст после изображения Z-Index?

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

источник

2016-05-30 Bradley Simpson

Не могли бы вы опубликовать пример в JSFiddle или вставить некоторые примеры кода? Если изображение является уровнем блока, последующий абзац должен автоматически отображаться снизу. –

https://jsfiddle.net/ppdermx5/ –

Другие дочерние элементы в 'ul', отличные от' li', являются недействительными 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

ответ

Смежные вопросы