文本在图像列表

Question

我试图把一个文本字段列表，并在图像（like this）

我设法使它对上一个列表项，但是当我添加更多的所有文字卡第一个图像字段（like this）

这里是我的代码：

HTML

  <ul class="panel"> 

     <li> 

     <img src=""> 

      <span class="text-field" class="clearfix"> 

      <h2>text</h2> 

      </span> 

     </li> 
      </ul> 

CSS

  .panel li {display: inline-block; padding-right: 10px;} 
      .panel li img{width: 100%;} 
      .text-field {position: absolute; top: 212px; left: 0; width: 100%; } 
      .text-field h2{color: #fff; background-color: #ff481c; display: inline-block; font-size: 16px; padding: 5px 10px; font-weight: bold; text-transform: uppercase;} 

Answer 1

指定position: relative为.panel li - 对于其absolute儿童考虑其顶部/左为0, 0

即

.panel li {display: inline-block; padding-right: 10px; position: relative;} 

Answer 2

对于这个答案，例子的目的，我已经巩固你的H2和.text字段的HTML和CSS合为一体，如下：

.text-field { position: absolute; top: 100px; left: 0; width: 100%; color: #fff; background-color: #ff481c; display: inline-block; font-size: 16px; padding: 5px 10px; font-weight: bold; text-transform: uppercase; } 

http://jsfiddle.net/zmart_sen/h3qNJ/

如在结果框中可见，这似乎工作。