文本在圖像列表

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/

如在結果框中可見，這似乎工作。