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

Calling the search engine in the page takes Baidu as an example

How to connect to a remote docker server with a certificate

Detailed process of upgrading glibc dynamic library in centos 6.9

Implementation code of the floating layer fixed on the right side of the web page

Detailed explanation of 7 SSH command usages in Linux that you don’t know

Basic usage of UNION and UNION ALL in MySQL

Global call implementation of Vue2.x Picker on mobile terminal

Summary of Nginx load balancing methods

vue+springboot realizes login verification code

Steps to install MySQL using Docker under Linux

Recommend

Solution to the problem of installing MySQL compressed version zip

How to modify mysql to allow remote connections

Vue realizes web online chat function

Solve the problem of Access denied for user 'root'@'%' to database 'xxx' after creating a database in MySQL

Web2.0: Causes and Solutions of Information Overload

How to use squid to build a proxy server for http and https

How to insert 10 million records into a MySQL database table in 88 seconds

MySQL 5.7.21 decompression version installation Navicat database operation tool installation

Master-slave synchronization configuration of Mysql database

MySql 8.0.16-win64 Installation Tutorial

MySQL date processing function example analysis

How does Vue3's dynamic components work?

Detailed explanation of JavaScript BOM composition and common events

How to install the graphical interface in Linux

Ideas and codes for implementing waterfall flow layout in uniapp applet