响应式和绝对定位的问题

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; 添加到封面 DOM 的父级。还要确保封面从 top: 0, left: 0 开始并以 bottom:0 和 right:0.

结束

您可能需要为正确对齐做一个 clearfix，以确保连续 DOMS 不会发生重叠。（仅针对 <850px 分辨率）。为通用 HTML 添加这个可能会破坏你的桌面分辨率。

响应式和绝对定位的问题

Trouble with responsive and absolute positioning

html

css

responsive-design