html - 响应式和绝对定位的问题

Question

我目前正在为案例研究构建一个页面，其中包含一个主横幅图片，后跟 3 行，每行 3 个子图片。每张图片都是通过 background-image 属性添加的，因此 div 可以保持相同的高度。 div 在顶部有一个悬停容器，我希望它始终位于顶部，但是当我到达断点(850 像素及以下)时，如果没有精确的像素，很难将盖子保持在容器顶部。有没有比我正在做的更简单的方法来做到这一点？

这是我使用的基本 HTML 结构

<div class="study-list">
<a href="#">
    <div class="study-block left">
        <div class="left-case-cover">
            <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div>
            <div class="case-study-cta">Click here to read more</div>
        </div>
        <div class="study study1"></div>
    </div>
</a> 
<a href="#">
    <div class="study-block center">
        <div class="center-case-cover">
            <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div>
            <div class="case-study-cta">Click here to read more</div>
        </div>
        <div class="study study2"></div>
    </div>
</a> 
<a href="#">
    <div class="study-block right">
        <div class="rightt-case-cover">
            <div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div>
            <div class="case-study-cta">Click here to read more</div>
        </div>
        <div class="study study3"></div>
    </div>
</a> 

我几乎肯定这是行不通的，因为 covers 必须绝对定位在 case-studys 之上。有没有更好的方法来解决这个问题，或者你们中的任何人都可以帮助我完成这项工作吗？它在 851px 及更高尺寸的屏幕上看起来不错，只需要想办法让它在移动设备上运行。

这是一个 Fiddle 我当前的问题，将其扩展为全屏可能会有所帮助。

谢谢你的帮助!

---

我尝试过的事情:

• 我曾尝试使容纳盖子的容器具有一定宽度，然后overflow:hidden 来隐藏多余的悬停，但这没有奏效。

• 我曾尝试用精确的像素来做到这一点，但这也让我失败了。

Answer 1

尝试将 position: relative; 添加到 cover DOM 的父级。还要确保封面从 top: 0, left: 0 开始，以 bottom:0 和 right:0 结束。

您可能必须为正确对齐做一个 clearfix，以确保不会发生连续 DOMS 的重叠。 (仅针对 <850px 分辨率)。为通用 HTML 添加它可能最终会破坏您的桌面分辨率。