Geek Answers Handbook

Responsive and absolute positioning issues

I am currently creating a case study page that includes a main banner image, followed by 3 lines of 3 additional images. Each image is added via the background-image property, so divs can remain the same. Divs have a container for hovering on top that I would like to always be on top, but when I get to the break point (850 pixels and below), it’s difficult to hold the lid on top of the container without exact pixels. Is there an easier way to do this than what I'm doing?

Here is the basic HTML structure that I use

 <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 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 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 Fundraising Software</div> <div class="case-study-cta">Click here to read more</div> </div> <div class="study study3"></div> </div> </a>

I am pretty sure that this does not work due to the fact that covers should be absolutely located above case-studys . Is there a better way to do this, or will any of you help me do this work? It is good for 851px screen sizes and above, you just need to figure out a way to make it work on mobile devices.

The following is the fiddle of my current problem, it can help expand it in full screen.

Thanks for the help!

What I tried:

• I tried to make a container in which the lid has a certain width, and then overflow:hidden to hide the excess tilt, but this did not work.

• I tried to do this with exact pixels, but it also did not help me.

+5
source share
1 answer

Try adding position: relative; to the parent DOM. Also make sure the cover starts with top: 0, left: 0 and ends with bottom:0 and right:0 .

You may need to run clearfix for proper alignments to ensure that consecutive DOMS overlap. (only for resolution <850px). Adding this for general HTML may cause your desktop resolution to freeze.

0
source

More articles:


All Articles