html - 列表中图像上的文本

Question

我正在尝试在列表中和图像上放置一个文本字段（像这样）

我设法使它在一个列表项上正确，但是当我添加更多时，所有文本字段都卡在第一个图像上（像这样）

这是我的代码：

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

IE

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