Переопределить z-index родительского div?

У меня есть слайд-шоу с этой структурой:Переопределить z-index родительского div?

<div id="carousel"> 
    <div class="slide"> 
     <img> 
     <h3>caption</h3> 
    </div> 
</div>

Carousel имеет фоновый градиент стиль, но градиент работает как над изображением и подписью. Я хочу, чтобы он просматривал только изображение, чтобы текст оставался ярко-белым сверху.

Я работаю в Drupal и не имею возможности добавлять или изменять div. Я пробовал использовать z-index и нигде не попадал. Я попытался переместить стиль фона на Slide и на изображение, но оно не отобразилось.

Как изменить порядок этих слоев, используя только CSS?

Спасибо!

источник

2016-03-24 RichendaCodes

ли дивы, что вы подаете заявление Z-индекс иметь либо позиции: относительный или позиции: абсолютный на них? Им нужен один или другой, чтобы иметь возможность применять z-index. –

Да, я убедился, что все используют относительный или абсолютный. Хорошая проверка, хотя! – RichendaCodes

Пожалуйста, проверьте следующее:

<div id="carousel"> 
    <div class="slide"> 
     <img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg"> 
     <h3>caption</h3> 
    </div> 
</div>

CSS:

#carousel{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87e0fd+0,53cbf1+40,05abe0+100;Blue+3D+%23+16 */ 
background: #87e0fd; /* Old browsers */ 
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0); /* IE6-9 */ 
height:300px;width:600px 
} 
img{width:20%}

JSFIDDLE: https://jsfiddle.net/m46doct1/4/

источник

2016-03-24 18:33:38 satya

Не совсем, я хочу, чтобы заказ был: фоновое изображение, градиент, текст. У меня есть такой порядок работы, играя с JSFiddle, но он не будет работать на моем сайте. Любые идеи, что может мешать? – RichendaCodes

Переопределить z-index родительского div?

ответ

Смежные вопросы