Empowering you to understand your world

CSS: How To Fix Overlapping DIV Elements

Making a web page responsive is challenging, and one of the challenges is ensuring that everything goes (and stays) where it is supposed to be. If a DIV element (A) is being covered by another element (B) that should be behind it, you can adjust the ‘z-index’ attribute to control which elements are at the front.

The larger the ‘z-index’ number, the closer to the front your element will be. If you have 100 elements and want element ‘A’ to be on top of all of them, you would use ‘z-index’ as shown below:


elementA {
    z-index: 100;
}

Subscribe to our newsletter
Get notified when new content is published