Укладка разделов друг на друга

Question

У меня очень простой вопрос CSS, по какой-то причине я не могу ответить на вопрос. У меня заголовок, который я бы хотел добавить к нему черным прозрачным фоном. Вот мой HTML:

<div id="directory"> 
<div class="headerbg"></div> 
<h1>Rental Directory</h1> 
</div> 

.headerbg имеет черный прозрачный фон. Но по какой-то причине H1 накладывается под черным фоном. Я попробовал z-индексирование как фона, так и h1, но я до сих пор не могу заставить H1 стекаться поверх фона. Может кто-нибудь, пожалуйста, посоветуете? Спасибо.

Вот ссылка на JS Fiddle: https://jsfiddle.net/x1L2jxnx/1/

Answer 1

z-index работы для расположенных absolute или relative элементов, это просто просто добавить позицию по отношению и г-индекс для тега h1,

h1 { font-size: 50px; border-bottom: 15px solid #e8cd54; position:relative; z-index:1 } 

Updated jsfiddle

Answer 2

Я считаю, что вы размещения теги H1 вне ВНЕ стороны headerbg дел. Попробуйте поместить h1 внутри headerbg DIV так:

<div class="headerbg"> 
<h1>Rental Directory</h1> 
</div> 

Answer 3

Это вопрос с абсолютным позиционированием.

h1 { 
    font-size: 50px; 
    border-bottom: 15px solid #e8cd54; 
    width: 100%; 
    position: absolute; 
} 

Заменить h1 на этот код.

Answer 4

г-индекс отлично работает для абсолютных расположенных элементов ,

Или вы можете просто вложить h1 внутри headerbg.

#directory { padding: 10px 0 10px 20px; position: relative; height: 35vh; background-image: url('https://markshimazuphotography.files.wordpress.com/2013/05/san_diego_skyline_coronado_sunset.jpg'); background-repeat: no-repeat; color: #fff;} 
 
.headerbg { background-color: rgba(0,0,0,0.5); width: 40em; height: 8em; position: absolute; top: 10px; left: 0; z-index:1} 
 
h1 { position:absolute;left:10px;top:10px;z-index:2;font-size: 50px; border-bottom: 15px solid #e8cd54; }

<div id="directory"> 
 
    <div class="headerbg"></div> 
 
    <h1> 
 
    Rental Directory 
 
    </h1> 
 
</div>

Answer 5

Добавление .headerbg div только для фонового эффекта не идеальный способ кодирования веб-страниц.

Я удалил .headerbg div из разметки и добавил css pseudo element, чтобы исправить эту проблему. Как это.

#directory { padding: 10px 0 10px 20px; position: relative; height: 35vh; background-image: url('https://markshimazuphotography.files.wordpress.com/2013/05/san_diego_skyline_coronado_sunset.jpg'); background-repeat: no-repeat; color: #fff;} 
 
#directory::after {content: ''; background-color: rgba(0,0,0,0.5); width: 40em; height: 8em; position: absolute; top: 10px; left: 0; } 
 
h1 { position: absolute; font-size: 50px; border-bottom: 15px solid #e8cd54; z-index: 1}

<div id="directory"> 
 
    <h1> 
 
    Rental Directory 
 
    </h1> 
 
</div>

Я также добавил позицию в h1 элемента. Поскольку parent div - position: relative, и pseudo element тоже должен был дать h1, чтобы я мог установить z-index: 1, как объяснил @CBroe в ваших предложениях.