разместить текст над изображением, существует ли он или нет

Question

Я хочу поместить текст поверх изображения, если он существует в базе данных или в том же месте, если он не существует.

Проблема, с которой сталкивается, заключается в том, что если есть изображение, текст под ним поднимется, и если его там нет, текст будет переведен на правильное местоположение, как описано на прилагаемом рисунке. код ниже:

<div class="category"> 
    <img src="home.php?cat={$mc.categoryid}"/> 
    <div class="title"> 
     <h2>Some text</h2> 
    </div> 
</div> 

Я хочу сделать что-то вдоль линий:

<style> 
.category{ 
    width: 400px; 
    height: 400px 
} 

.title { 
    position: relative; 
    top: 3px; 
    left: 0; 
    width: 100%; 
    height: 50px; 
} 
</style> 

Answer 1

Убедитесь, как изображение и текст имеют position:absolute и .category имеет position:relative, с текст z-index выше, чем у изображения.

Answer 2

Дайте свой контейнер category a positionrelative. Затем дайте position от absolute до .title. position:absolute берет то, что было назначено вне нормального потока контента. position:relative; на контейнере будет содержать элементы position:absolute внутри этого пространства. Но вы все равно можете переместить его туда, где хотите. Так что если вы хотите иметь .title появится в правом нижнем углу, применять стили, такие как right:0 и bottom:0

Fiddle

Answer 3

Существует более чем один из способов сделать это.

Метода 1. Доведите «название» за пределы «категория» сОн так:

<div class="category"> 
    <img src="home.php?cat={$mc.categoryid}"/> 
</div> 
<div class="title"> 
    <h2>Some text</h2> 
</div> 

Способ 2. Включать изображение внутри другой DIV и дает фиксированную ширину и высоту, как это:

<div class="category"> 
    <div style="width:xx; height:yy;"> 
     <img src="home.php?cat={$mc.categoryid}"/> 
    </div> 
    <div class="title"> 
     <h2>Some text</h2> 
    </div> 
</div> 

В приведенном выше примере вы используете свои собственные значения для xx и yy в зависимости от того, сколько вы хотите выделить для изображения. Конечно, это не должно быть встроенным CSS. Вы можете дать ему еще один класс.