Html 列表中图像上方的文本

我试图在列表内和图像上方放置一个文本字段（）

我设法在一个列表项上做对了，但是当我添加更多的文本字段时，所有的文本字段都被固定在第一个图像上（）

这是我的密码：

HTML

---

指定<代码>位置：< <代码>的相关< /代码>面板LI/代码> -对于其<代码>绝对< /代码>儿童，将其上/左考虑为<代码> 0, 0 < /代码>

i、 e

         <ul class="panel">

        <li>

        <img src="">

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

            <h2>text</h2>

             </span>

        </li> 
          </ul> 

          .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;}

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