Solution to the bug that IE6 select cannot be covered by div

Use div to create a mask or simulate a pop-up window. However, in IE6, when there is a drop-down list box select element under the div, the drop-down list box will break through the div and be displayed on the div. This problem will occur regardless of the z-index value. The problem may be due to the pop-up drop-down list of the drop-down list control, which causes the Z-axis height to be out of control. But IE6 has a magical logic, div cannot cover select, but iframe can cover select, and div can cover iframe, so the solution is to use an Iframe element with a higher Z-axis height to wrap or cover the drop-down list box control to return it to its normal Z-axis height!

The html is as follows:
Html code

Copy code

The code is as follows:

<div id="acontainnerbox" class="aboxinitcss">
Here are a lot of codes,
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>

Copy code

The code is as follows:

<div id="acontainnerbox" class="aboxinitcss">
Here are a lot of codes,
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>

The css code is as follows:
Html code

Copy code

The code is as follows:

.aboxinitcss{
position:absolute;
margin-top:0px;
margin-left:0px;
display:none;
background:#FFF;
border:solid #CCC 1px;
padding:30px;
z-index:9999;
width:620px;overflow:hidden;
}
.ifhideselect{
z-index:-1;
width:680px;
height:255px;
position:absolute;
border:0;
left:0;
top:0;
}
.aboxinitcss{
position:absolute;
margin-top:0px;
margin-left:0px;
display:none;
background:#FFF;
border:solid #CCC 1px;
padding:30px;
z-index:9999;
width:620px;overflow:hidden;
}
.ifhideselect{
z-index:-1;
width:680px;
height:255px;
position:absolute;
border:0;
left:0;
top:0;
}

This will solve this bug.
The z-index of the iframe must be set to a negative number, otherwise it will not be covered.

<<: Specific use of stacking context in CSS

>>: An article to give you a deep understanding of Mysql triggers

Solution to the bug that IE6 select cannot be covered by div

NestJs uses Mongoose to operate MongoDB

JS ES new features template string

Solution to the problem of text position jumping when the search text box leaves the focus

Detailed explanation of the encapsulation and use of the Vue image magnifier component

Summary of MySQL LOAD_FILE() function method

Example of setting up a whitelist in Nginx using the geo module

A brief discussion on the use of Web Storage API

11 Examples of Advanced Usage of Input Elements in Web Forms

Introduction to building a DNS server under centos7

JavaScript implements Tab bar switching effects

Recommend

Experience in solving tomcat memory overflow problem

Detailed explanation of log processing of Docker containers

CSS XTHML writing standards and common problems summary (page optimization)

How to use React slots

Use CSS3 to implement button hover flash dynamic special effects code

Description of meta viewport attribute in HTML web page

Summary of 7 pitfalls when using react

Use JS to zoom in and out when you put the mouse on the image

33 ice and snow fonts recommended for download (personal and commercial)

JavaScript to implement the function of changing avatar

A brief discussion on several ways to pass parameters in react routing

CSS realizes process navigation effect (three methods)

Vue implements login type switching

Detailed explanation of SSH password-free login configuration under Linux

Introduction to Enterprise Production MySQL Optimization