CSS Текст поверх изображения

Question

Я пытаюсь поместить текст поверх изображения, как так:

.gallery-image { 
 
    position: relative; 
 
} 
 
h2 { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
h2 span { 
 
    color: white; 
 
    font: bold 24px/45px Helvetica, Sans-Serif; 
 
    letter-spacing: -1px; 
 
    background: rgb(0, 0, 0); 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 10px; 
 
}

<div class="gallery-image"> 
 
    <a href="#"> 
 
    <img src="image.jpg" width="280"> 
 
    </a> 
 
    <h2><span>Text</span></h2> 
 
</div>

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

Answer 1

Отрывок работает для меня, во всяком случае:

• Дайте img в z-index: 2;

• И h2z-index: 3;

Answer 2

.container { 
 
    position: relative; 
 
} 
 
h2 { 
 
    position: absolute; 
 
    bottom: 10%; 
 
    background: darkgray; 
 
    padding: 1%; 
 
    color: white; 
 
}

<div class="container"> 
 
    <img src="http://placekitten.com/g/200/300" alt="" /> 
 
    <h2>THIS text</h2> 
 
</div>

Что-то вроде этого? Я только что написал тег h2, избавившись от необходимости использовать этот тег span и уменьшив разметку.

Answer 3

Я чувствую, что это требует некоторого объяснения.

пример работает, но если это на самом деле не работает для OP, он/она может использование z-index а просто позвонив z-index на img тег не будет работать, как demonstrated here. Изменение z-index как изображения, так и h2 не будет иметь эффекта.

z-index работает только с позиционируемыми элементами. Поскольку родительский элемент равен position:relative, вы можете использовать position: inherit на одном из своих детей (или просто установить позицию). В этом случае img заворачивают в якорной тег:

<a href="#"> 
    <img src="image.jpg" width="280"> 
</a> 

Так применяя z-index к img тег не имеет смысла в любом случае. Вместо того, чтобы добавить его в a:

a{ 
    position: inherit; 
    z-index: 2; 
} 

Теперь, если вы измените z-index значения h2 и a вы увидите элемент с более высоким z-index число выйти вперед:

EXAMPLE