Solve the Problem of covering Div by dropdownlist

Problem

When you use a div to display some help information on the top of some controls, you may encounter the problem that the control overwrites the help information of the div. This problem occurs because the Z-index attribute is not set for the control on the page, and the Z-index attribute determines the front and back layers of the element display, an element with a large Z-index value is always in front of an element with a smaller Z-index value.

Dropdownlist does not have the Z-index attribute. They are window-level controls. If you want to display a div on the dropdownlist control, you will encounter the dropdownlist to overwrite the div. The following figure shows a common problem in IE 6.

Solution

Assume that you want to display a div when you move the cursor over an image on An ASPX page. And you can use JavaScript to achieve this effect.CodeIn, you will control the position of the DIV display. If a combo box's list box is in this position, the user will see that these controls block the DIV content.

There are many solutions to this problem. I use the simplest one. This solution is to display an IFRAME of the same size as the DIV in the place where the DIV is displayed.

You can easily control the size of this IFRAME, because the height and width of the DIV are known.

Code

Put an IFRAME at the top of the page:

<IFRAME Width="0" Scrolling="No" Height="0" 
Frameborder="0" Class="Iballoonstyle" ID="Iframetop"></IFRAME>
 

Use JavaScript to display the IFRAME at the same time where you want to display the DIV:

VaRLayer =Document. Getelementbyid (divtip. ID );
Layer. style. Display = 'block ';
VaRIFRAME =Document. Getelementbyid ('iframetop ');
IFRAME. style. Display = 'block ';
IFRAME. style. width = Layer. offsetWidth-5;
IFRAME. style. Height = Layer. offsetHeight-5;
IFRAME. style. Left = Layer. offsetleft;
IFRAME. style.Top= Layer. offsettop;
 

In the preceding JavaScript code, divtip. ID is the ID value of the DIV to be displayed.

Address: http://www.codeproject.com/KB/dotnet/Overlapping.aspx

 

Reference:

Http://topic.csdn.net/t/20050909/11/4259391.html

Http://www.cnblogs.com/zhc088/archive/2007/08/22/864981.html