Почему не работает z-index или как наложить эти 2 блока на друг друга?

Question

[lesmanora]

В работе бустрап 4, подключена галерея fancybox.

<div class="container" style="margin-top: 56px;">
		<div class="row  justify-content-md-center">
        <div class="col-md-4 thumb">
        <div style="z-index: 2; position: relative;">
            <a data-fancybox="gallery" href="img/image12.png" >
                <img class="img-fluid" src="img/image12.png" alt="...">
            </a>
            </div>
            <div style="z-index: 1; position: relative; margin-top: -200px; ">
            <div style="height: 347px; background-color: FCFCFC; box-shadow: 0px 4px 11px rgba(37, 62, 85, 0.07); margin-left: 50px; margin-right: 50px;">	
            </div>
            </div> 
        </div> </div> </div>

Нужно, чтобы на картинке сверху был блок с описанием. Даже, если переворачиваю блоки, картинка все равно остается сверху. Что не так?

Comments

[Ankhena]

https://jsfiddle.net/hqxymgt6/
С размерами разберитесь.
Лишние теги поудаляла.
И не пишите стили в атрибут.

[lesmanora]

Ankhena, спасибо! Все сработало. Я так пишу, только пока стили подбиваю. Еще раз огромное спасибо. Поняла в чем ошиблась.

[Ankhena]

lesmanora,

Я так пишу, только пока стили подбиваю

Вообще не надо так писать.
Да и какой смысл потом переписывать.
Хочется потестировать, тестируйте прямо в инструментах браузера.

Разделяете окно редактора кода на 2 половинки. С одной стороны html, с другой css. Всё нет проблем.

Answer 1

[Дмитрий Тарасов]

читать и вообще сделай пример на https://jsfiddle.net/ и покажи что не работает.

Answer 2

[Дима Паутов]

https://jsfiddle.net/rootd/79fo8eba/8/