How To Control `div` Overlapping In Html

July 29, 2022 Post a Comment

I am creating a webpage, And I have two divs, A and B for instance. A's position is fixed and it's on top of the page, but B's position is absolute and is somewhere in the middle o

Solution 1:

You can use z-index css setting to modifiy non-static positioned element order:

div#A { z-index: 2; }
div#B { z-index: 1; }

A will be displayed over B.

Solution 2:

use z-index value to adjust them accordingly to layer. its a style property: style="z-index:200"....

Solution 3:

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

<html>
  <div id="divA" style="width:100%; height:50px; z-index:2; position:fixed; background-color: red">
  </div>
  <div id="divB" style="width:100%; height:50px; z-index:1; position:absolute; top:30px; left:20px; background-color:green ">
  </div>
</html>

divA will come on top of divB now(due to z-index property). But make sure to define position property for divs. This wont work if we remove position: fixed for divA.

Solution 4:

Give A a larger z-index property than B.

div.a {
    z-index:2;
}
div.b {
    z-index:1;
}

You can read about what z-indexes do over at the MDN, but in a nutshell, "When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one."

Solution 5:

You can use css media queries and change the property values if the overlapping is in fact.

Or use javascript to test if it overlaps. Here's an approach u wrote someday: https://github.com/yckart/jquery.overlaps.js

Html5 Tutorial