Z-index и слайдер

@AkselDee · Регистрация: 10.04.2015

Author24 — интернет-сервис помощи студентам

Имеется слайдер, нужно поместить между картинками(class="slide") и заголовками(h1) на слайдере неподвижную сетку(class="grid"). Когда указываю z-index(.grid) меньше или равным 0, сетка оказывается полностью под слайдером, когда больше - над.

HTML5

<ul class="bxslider">
    <li> 
        <div class="slide" style="background-image: url(images/1.jpg)">
        <h1>Заголовок 1</h1>
        </div>
    </li>
    <li>
        <div class="slide" style="background-image: url(images/2.jpg)">
        <h1>Заголовок 1</h1>
        </div>
    </li>
    <li>
        <div class="slide" style="background-image: url(images/3.jpg)">
        <h1>Заголовок 3</h1>
        </div>
    </li>
</ul>
<div class="grid">

CSS

.bxslider{
    height: 500px;
    width: 100%;
}
 
.slide{
    margin-top: 0px;
    height: 500px;
    width: 100%;  
    background-position: center center;
    background-size: cover;
    z-index:-100; 
}
 
ul{
    margin: 0;
    padding: 0;
}
 
li{
    position: relative;
    height: 500px;
    width:100%;
    list-style-position: inside;
    list-style-type: none;
}
 
.grid{
    position: absolute;
    z-index: 1;
    top:0;
    height: 500px;
    width: 100%;
    background-image: url(images/grid.png);
}
 
h1{
    position: relative;
    z-index: 100;
    font: 35px 'Open Sans Condensed', sans-serif;
    color: white;
}

	10.04.2015, 13:51

Опции темы