文本在列表中的图像

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