Css div cannot cover select solution

So how can we solve this bug? The solution to this bug is as follows:

1. Place select in iframe. div cannot overwrite select, but iframe can overwrite select, while div can overwrite iframe. So the solution is to use the Iframe element with a higher Z axis height, wrap or overwrite the drop-down list box control to bring it back to the normal Z axis height, but every select is too annoying, not recommended

2. Place an empty iframe in the div whose select needs to be overwritten, so that the problem can be solved in a targeted manner, which is simple and recommended.

The following code shows the css tutorial for the 2nd methods:

 

<STYLE type = text/css>

# Pop {

Width: 300px;

Height: 100px;

Padding: 10px;

Position: absolute;

Top: 0;

Border: 1px solid blue;

Background-color: # 6666CC;

Filter: alpha (opacity = 70 );

Opacity: 0.6;

}

# Sect {

Width: 400px;

Margin-top: 60px

}

# Pop iframe {

Display: none;

Display: block;

Position: absolute;

Top: 0;

Left: 0;

Z-index:-1;

Width: 3000px;

Height: 3000px;

}

</STYLE>

The html code is as follows:

<DIV id = pop> This is an absolutely positioned div. Check whether it blocks select. <IFRAME> </DIV>
<SELECT id = sect> <OPTION value = 1 selected> I'm select. Can you cover me? </OPTION> <OPTION value = 2> I'm select, can you cover me? </OPTION> </SELECT>