对其中包含多个元素的列表项使用填充

Question

因此，我有一个HTML列表，其中每个列表项都有一个图像，该图像的标题标题位于其上方，并且该图像后面的方框在悬停时发生转换。我已经接近使它以我想要的方式显示，但是列表项似乎并没有按照应有的方式进行协作。我正在尝试使框位于图像的正后方，文本位于框的正上方，但目前它们略有错位。这是展示列表的JSFiddle JSFiddle。

列表项之一的示例看起来像这样：

        <li>
            <a href = ""  class="linkChange">
                <h6 class ="headings">Appointment App</h6>
                <img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
                <span class="box rotate" id = "box"></span>
            </a>
        </li>

css在JSFiddle中有详细说明。我是Web Dev的新手，如果某些CSS多余，请原谅我。

Answer 1

而不是在<span>标签后使用<img>，而不是将图像放在<div>中，并将背景应用于该div。同时删除position: absolute;和.imgs上的.box。

<div class="box rotate" id = "box">
    <img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
</div>