In IE, the select belongs to the window type control, which "blocks" all non-window type controls
You can understand that, div such a component is in the browser client area using code "render",
They are rendered on the painting surface of the client area,
The select is a standard Windows control that is used and is placed only as a child control of the client area.
It overwrites all the client area painting surfaces, but does not necessarily overwrite other types of window controls.
such as IFrame and other select, if you have used a similar environment such as Delphi will naturally understand. IE7 resolves this type of bug.
During the development process, you may experience the following problem.
IE6 a DIV is scratched by the underlying select control, no matter how the Z-index property is set.
Before the solution
There are many ways to talk on the Internet, and now I'm going to introduce you to a simple solution.
Add the IFrame control within the pop-up div as follows:
<iframe style= "position:absolute z-index:-1;" frameborder= "0" src= "About:blank" ></ Iframe>
The key part of the attribute is the red part, Frameborder is to control the layout. The green part is not to be used.
After resolution for
The principle of this method is select and iframe as window. The DIV is not able to block the select control, but the div can block the IFrame control, and the IFRAME control can block select, so if the iframe at the bottom of the div, you can let div block the Select control
Div is a more common problem when it is blocked by a select.
Some friends by the content of the div into the iframe or object to solve.
Unfortunately, this will destroy the structure of the page, interaction is not good.
The method used here is:
Although Div directly cannot cover select
But the DIV can cover the IFRAME, and the IFRAME can cover the Select,
So, take an IFRAME as the base of the Div,
This div will cover the select.
<script>
function divsetvisible (state)
{
var divref = document.getElementById (' Popupdiv ');
var ifrref = document.getElementById (' Divshim ');
if (state)
{
DivRef.style.display = "block";
IfrRef.style.width = Divref.offsetwidth;
IfrRef.style.height = Divref.offsetheight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = divref.style.zindex-1;
IfrRef.style.display = "block";
}
Else
{
DivRef.style.display = "None";
IfrRef.style.display = "None";
}
}
</script>
<body>
<form>
<select>
<option>a Select Box is Born ....</option>
</select>
</form>
<div id= "Popupdiv" style= "Position:absolute; top:25px; left:50px; padding:4px; Display:none; Background-color: #000000; Color: #ffffff; Z-index:100 ">
.... and a DIV can cover it up<br/>through the help of a IFRAME.
</div>
<iframe id= "Divshim" src= "Web page special effects: false;" scrolling= "no" frameborder= "0" style= "position:absolute; top:0px; left:0px; Display:none; " >
</iframe>
<br/>
<br/>
<a href= "#" onclick= "Divsetvisible (True)" >click to show div.</a>
<br/>
<br/>
<a href= "#" onclick= "Divsetvisible (False)" >click to hide div.</a>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
