Проблема с отзывчивым и абсолютным позиционированием

Question

В настоящее время я создаю страницу для тематических исследований, которая включает в себя основное изображение баннера, за которым следуют 3 строки из 3 дополнительных изображений. Каждое изображение добавляется через свойство background-image, поэтому div могут оставаться одинаковыми. У divs есть контейнер для зависания сверху, который я хотел бы всегда быть на вершине, но когда я добираюсь до точки разрыва (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. (для < разрешение 850 пикселей). Добавление этого для общего HTML может привести к зависанию разрешения вашего рабочего стола.