Как разместить блок над изображением?

Question

[Лобстер]

Хочу сделать слайдер на всю ширину экрана но у меня не выходит сделать так чтобы у каждого слайда над картинкой был блок с текстом. Я пробовал z-index... или я его не так понял или я не так сверстал секцию. За основу взял контейнер на всю ширину экрана container-fluid, а блок который должен находиться поверх картинки slider_promo

Ситуация сейчас выглядит так:

Нужен помощь =)

<section class="slider">
		<div class="slider_item">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-12">
						<img src="img/top-slider/1.jpg" alt="" class="slider_pict">
						<div class="slider_promo">
							<h1 class="slider_title">Заголовок</h1>
							<p class="slider_subtitle">Подзаголовок</p>
							<a href="" class="link button">Кнопка</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

.slider 
	max-width: 1920px
	min-height: 660px
	margin: 0 auto
	&_pict
		z-index: 1
	&_promo

Comments

[koanvl]

1) вам не обязательно делать такую вложенность по тегам. Тут можно обойтись и без container-fluid, и без row, и без col-lg-12. Сделайте ширину slider_item 100%, а изображение - респонсив.
2)Чтобы z-index работал вам необходимо присвоить целевому тегу position: relative или position:absolute в зависимости от того, что вы будете дальше с ним делать. Если используете position:absolute, то родителю нужно присвоить position:relative иначе ваш тег будет абсолютно позиционироваться не в родительском теге, а не понять где. Почитайте еще раз мануалы про позиционирование и про z-index. Там нет ничего сложного
Рекомендую обратить внимание, как расположен тег h1 тыц

Answer 1

[Astrohas]

<div class="slider-item" style="background-image: url(img/top-slider/1.jpg)">
  <div class="slider-text">
    <div class="slider-title"></div>
    <div class="slider-description"></div>
    <a href="" class="slider-link"></a>
  </div>
</div>

думаю идея ясна, изображения это фон слайдера, а не отдельный элемент

Comments

[Лобстер]

спасибо =)