csshtmlpositionabsolute

Absolute positioning of div without overlapping div above

I have a div that I wish to position at the bottom of the webpage. I can achieve this using position:absolute. However, I don't want it to overlap the div above when the window is made smaller. This was achieved by changing it to position:relative however as expected it does not stay on the bottom of the page on bigger screens.

Is there a way in which this is possible?

Current CSS

position:relative; 
bottom:0; 
background-image:url('.......'); 
background-repeat:repeat-x; 
background-position:bottom;
width:100%;

An example of what I was explaining.

enter image description here

Solution

  • When the window becomes smaller, use media queries for that particular resolution or a resolution lesser than that and apply a display:none; to that div with the class that has a position absolute, if you do not want it to display or z-index:0; or z-index:-1; if you want to show it below the contents div.

    Hope this helps.