DIV по IMG внутри TD

Question

Мне нужно поставить DIV поверх IMG внутри TD, просто чтобы показать что-то, но когда я это сделаю, DIV создается под IMG (не накладывается, чуть ниже, как float left и clear право ...)

HTML:

<table id="table" cellspacing="0"> 
    <tr> 
     <td><img src="something-here.jpg" alt="asd"/><div>Text over the image</div></td> 
     <td><img src="something-here.jpg" alt="asd"/><div>Text over the image</div></td> 
     <td><img src="something-here.jpg" alt="asd"/><div>Text over the image</div></td> 
    </tr> 
</table 

Answer 1

Вы можете использовать CSS, как это:

#table td, #table td img { 
    position:relative 
} 
#table td img { 
    z-index:-1 
    max-width:100%; 
} 
#table td div { 
    position:absolute; 
    bottom:0; 
    background:rgba(0,0,0,0.5); 
    color:#fff; 
    width:100%; 
} 

Пример: http://jsbin.com/iyESasiv/1/edit. Вы можете удалить цвет фона и т. Д. Из css.

Answer 2

Это будет сортировать вас:

#table td { position:relative; } 
#table div { 
    left:0; 
    position:absolute; 
    top:0; 
} 

Просто добавить, что в вашем CSS для таблицы

Answer 3

Вы можете просто установить правильный индекс.

<table id="table" cellspacing="0"> 
    <tr> 
     <td><img style="z-index:0;" src="something-here.jpg" alt="asd"/><div style="z-index:1;">Text over the image</div></td> 
     <td><img style="z-index:0;" src="something-here.jpg" alt="asd"/><div style="z-index:1;">Text over the image</div></td> 
     <td><img style="z-index:0;" src="something-here.jpg" alt="asd"/><div style="z-index:1;">Text over the image</div></td> 
    </tr> 
</table> 

из проще:

<table id="table" cellspacing="0"> 
    <tr> 
     <td><img class="imgClass" src="something-here.jpg" alt="asd"/> 
       <div class="divClass">Text over the image</div></td> 
     <td><img class="imgClass" src="something-here.jpg" alt="asd"/><div class="divClass">Text over the image</div></td> 
     <td><img class="imgClass" src="something-here.jpg" alt="asd"/><div class="divClass">Text over the image</div></td> 
    </tr> 
</table> 

и в вашем CSS файл дополнения:

.imgClass{ 
    z-index:0; 
} 
.divClass{ 
    z-index:1; 
}