How to control `div` overlapping in html

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 of the page. When they Overlap, B comes on top of A, But I want this to be the other way around. I want A to come on top of anything, but I don't know how to do that.

Please note that changing their positioning is not an option.

Thank You in advance. :)

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

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.

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."

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

Use CSS to give Div A a high Z-Index.

#a{
  z-index: 100;  
}

This will mean that Div A will definitely stay over all/most other elements, the higher the value the more likely it will be above everything else depending on how many other elements are on the page. If you need more precise overlap control for multiple elements, assign specific z-index values to your elements, the higher the value the more on top the element will be. You can also use minus values.

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.

来源：https://stackoverflow.com/questions/15440391/how-to-control-div-overlapping-in-html

标签

css

html

overlap