How to cover the Select (drop-down box) element on the HTML page

xiaoxiao2021-03-06  50

Down-pull box, the HTML SELECT element, DropdownList when .NET design, is the Windowed Element in HTML, especially IE6, almost the only Windowed Element (there are small amounts such as Popup).

Ordinary elements, TextBox, Div, Table ... These, belong to Windowless Element, which is covered with each other by Z-Index, on them, is SELECT these Windowed Element. So in general, Div, Table, etc. cannot cover Select.

This problem is widely used in the use of various pop-up controls, such as calendar controls.

If you want to display DIV, the previous practice is, dynamic, when you are displayed, let the SELECT of the DIV area is invisible, when DIV disappears, restore these SELECT elements. This approach is quite weird, because it is not "cover" SELECT, but let her disappear, if the Calendar pop-up element should only cover part of the Select element, but SELECT does not see, the user may feel weird. It is also troublesome, and judge the location of each Select one by one.

After IE5.5, there is a new tip, called "iframe Shim" (iframe SHIM "(IFRAME CS: P), which can be" cover "SELECT element.

It takes advantage of a special element: iframe. Before IE5.5, iframe is also Windowed Element, but from 5.5, iframe is a normal Windowless Element, but although it is Windowless Element, IFRAME can cover SELECT. The principle of this approach is: putting an iframe with something you want to display, the same size, position, and set z-index so that iframe is under this Div; this, iframe covers SELECT, at the same time, iframe The DIV is revealed in the DIV to be displayed.

Limit: Only applicable to IE5.5 and later.

Reference article link: http://dotNetjunkies.com/weblog/jking/archive/2003/07/21/488.aspx

Examples of program code: //html.select.hack.iframe shim.htm