вопрос
Доброго времени суток, помогите пожалуйста я хочу создать блок поверх изображения в fullstory
fullstory.tpl
styles.css
и вот что получается в итоге:
почему так ? ведь z-index у блока .contents стоит больше почему он под блоком bgimg ?
подскажите пожалуйста я новичок , и только начинаю верстать свои шаблоны, и вот не могу понять как мне сделать так что-бы блок contents был поверх картинки ?
fullstory.tpl
<div class="contents">
<div class="bgimg" style="background-image: url({image-1});"><a href="{full-link}" rel="nofollow"></a></div></div>
styles.css
.contents { z-index:100; width: 1144px; height: 450px; background-color: black }
.bgimg { z-index:10; width: 1144px; height: 350px; background-position: center center; background-size: cover; }
и вот что получается в итоге:
почему так ? ведь z-index у блока .contents стоит больше почему он под блоком bgimg ?
подскажите пожалуйста я новичок , и только начинаю верстать свои шаблоны, и вот не могу понять как мне сделать так что-бы блок contents был поверх картинки ?
Разобрался для того что-бы блок был поверх изображения в данном случае z-index не помогает
я решил выйти из ситуации по другому я наложил один блок на другой в CSS cпомощью margin
вот что у меня получилось:
fullstory.css
style.css
вот что в итоге получилось:
а вот как это можно применить:
я решил выйти из ситуации по другому я наложил один блок на другой в CSS cпомощью margin
вот что у меня получилось:
fullstory.css
<div class="bgimg" style="background-image: url({image-1});"><a href="{full-link}" rel="nofollow"></a></div>
<div class="contents"></div>
style.css
.contents { margin-top: -65px; z-index:100; width: 144px; height: 450px; background-color: black }
.bgimg { width: 1144px; height: 350px; background-position: center center; background-size: cover; }
вот что в итоге получилось:
а вот как это можно применить: