How to control `div` overlapping in html

Question

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. :)

Take a look [here](http://stackoverflow.com/questions/270493/how-would-you-make-two-divs-overlap?rq=1), maybe it will help — fcm, Mar 15 '13 at 19:15

score 5 · Answer 1 · answered Mar 15 '13 at 19:15

5

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.

answered Mar 15 '13 at 19:15

aorcsik

15,271
5
39
49

score 3 · Accepted Answer · answered Mar 15 '13 at 19:15

3

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

answered Mar 15 '13 at 19:15

Sri Tirupathi Raju

779
4
14

score 2 · Answer 3 · answered Mar 15 '13 at 19:32

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.

score 1 · Answer 4 · answered Mar 15 '13 at 19:15

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

score 1 · Answer 5 · answered Mar 15 '13 at 19:19

1

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

answered Mar 15 '13 at 19:19

yckart

32,460
9
122
129

score 1 · Answer 6 · answered Mar 15 '13 at 19:30

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.

How to control `div` overlapping in html

6 Answers6

Linked

Related