CSS Divs overlapping, how do I force one above the other?

simply use z-index:

z-index : 1;

Note that z-index only works on elements that have some kind of positioning set (relative, absolute, fixed)


Elements with a higher z-index will appear in front of elements with a lower z-index in the same stacking context. If two elements have the same z-index, the latter one appears on top. Stacking context is defined by:

  • The Document Root
  • Elements with position: absolute or position: relative and a z-index
  • Elements that are partially transparent, that is they have an opacity < 1
  • In IE7, any element with position: absolute or position: relative (this can cause many bugs since it is the only browser that acts this way)

If IE7 is an issue, you can make all browsers behave the same by always adding z-index : 1 to any element that also has some position set.

Leave a Comment