Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как создать блок поверх блока изображения ?

Как создать блок поверх блока изображения ?


     04.01.2018    Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)    3000

вопрос
Доброго времени суток, помогите пожалуйста я хочу создать блок поверх изображения в fullstory

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 был поверх картинки ?

Ответил: clavik1312


Разобрался для того что-бы блок был поверх изображения в данном случае z-index не помогает
я решил выйти из ситуации по другому я наложил один блок на другой в 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;  }


вот что в итоге получилось:


а вот как это можно применить:
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх