2

I have some custom dropdown css/jquery menus that are not overlapping (covering) some text within a floating div. The div text bleeds into the menu. How can I assure that my menu will overlap anything on my page or at least the text that is displayed in the div in this case?

3 Answers 3

3

You can use css z-index for positioning elements over each other.

Some code would be helpful in answering this question, please update your question or create a jsfiddle.net

1
  • Could you suggest any example sites ?? Might help future readers ! :)
    – Joseph
    Dec 6, 2013 at 4:58
1

It would help if you could post the CSS of the dropdown menu as well as the floating div that is interfering with it, but here's the general idea:

1) Any elements that have relative, fixed, or absolute positioning will appear on top of other elements that have one of these types of positioning if the element in question has a higher z-index value than the other elements.

2) An element with absolute or fixed positioning will appear on top of elements that have relative or static positioning. The exception to this is if the relatively positioned element has been given a higher z-index value.

3) For relative and static elements, the one that comes later on the page will overlap earlier ones. The same exception from #2 above applies here as well.

1

The important thing is the stacking context. From https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context :

A stacking context is formed, anywhere in the document, by any element which is either

  • the root element (HTML),
  • positioned (absolutely or relatively) with a z-index value other than "auto",
  • (in Gecko/Mozilla browsers) elements with an opacity value less than 1.

Let's say that you have two divs, the first one containing your menu, and the second one floating. If both divs have position:relative, they both have a stacking context, but the second one will stack on top of the first one.

Puttin z-index : 1 on the first div solves the problem (try this example jsfiddle.net/sPKY6/).

This could help too : http://www.erichynds.com/jquery/visualizing-your-z-index-stacks-with-jquery/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.