css – Overlap two Divs hides contents – Education Career Blog

We overlap two Divs using “postion:absolute” and z-index.


The text in the green zone (div id=”Zone2″) is hide by text in the yellow zone (div id=”Zone3″). Any help on how to display the text?

Edit1: We can’t use nested divs.


I’m not sure what all the absolute positioning is good for, but you might want to put the yellow zone into the green-zone div, and use a float.

Solution with a float within the green zone

Solution with padding


Simplest way I can possibly think to do this:

Uses one nested div inside the Zone2 to wrap your text and make it appear as if it’s wrapped to Zone3.

This is similar to using a <p> or <span> with display: block;.

jsFiddle example.

Leave a Comment