响应和绝对定位的麻烦

Question

我目前正在为案例研究构建一个页面,其中包括一个主横幅图像,后面是3行3个子图像.每个图像都通过background-image属性添加,因此div可以保持相同的高度.div有一个悬浮容器在顶部,我希望始终在顶部,但当我到达我的断点(850px及以下)时,很难,没有精确的像素,将盖子保持在容器的顶部.有没有比我正在做的更容易的方法呢？

这是我正在使用的基本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及更高的屏幕尺寸看起来很不错,只需要想办法让它在移动设备上工作.

这是我当前问题的一个小提琴,它可能有助于将其扩展到全屏.

感谢您的帮助!

---

我尝试过的事情:

•我试图制作容纳盖子一定宽度的容器然后overflow:hidden隐藏多余的悬停,但这没有用.

•我试图用精确的像素做到这一点,但这也让我失望了.

Answer 1

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

您可能需要进行明确的修复以正确对齐，以确保不会发生连续 DOMS 的重叠。（仅适用于 <850px 分辨率）。为通用 HTML 添加此内容可能最终会破坏您的桌面分辨率。