All,
REMEMBER: My overlay uses absolute positioning.
I am trying to fix an overlay issue with my auto-suggest menu when it resides inside the ModalPopup (that uses Ajax control toolkit's ModalPopupExtender). As the user types, the overlay appears under the popup, but I want it to appear over it.
So the simple thing was to change the z-index on my auto-suggest menu overlay, but still the overlay appears underneath the modal popup. So I opened the source code for ModalPopupExtender and looked at its z-index, and set mine to higher what it was using (they're using 10,000; I used 20,000). I thought that would fix it, but to no avail; my overlay is still underneath the popup. How can that be when my overlay div's z-index is higher then their overlay's z-index?
I would appreciate any help on this.
After further investigation, I think this line is causing the modal popup to go in front of everything:
this._foregroundElement.parentNode.appendChild(this._backgroundElement);
The 'foreground element' is the popup div and the background element is a temporary div that I think spans the entire page.
OK, since I can't change this, any suggestion what I can do to fix my overlay that is attached to a textbox in the modal popup?
Problem resolved.
Cause of the problem was the IFRAME that was used to display the overlay with low z-index value.