Several situations where div is covered by iframe and their solutions

Similar structures:

The first one: the transparent background is blocked

When a div uses a transparent background, regardless of whether it is in (opacity or RGBA format), except for Chrome, all other browsers will show that the div is covered by the iframe.

Solution:

The div uses an opaque background or a transparent background image.

The second type: z-index is invalid in IE8

In IE, introducing video playback in an iframe will cause the z-index of the div to be invalid, that is, no matter what the z-index of the div is set to, it will be covered by the iframe. source

Solution:

Add a parameter wmode=opaque to the iframe address. If the address is: http://caibaojian.com, then change it to: http://caibaojian.com?wmode=opaque.

flash behind other elements

By the way, I saw that Flash also has this z-index invalid problem. The same is to add the above parameter to Flash

Appendix: Some parameters of iframe

border

Sets the width of the border around the frame

frameboder

Sets whether the border is 3-dimensional (0=no, 1=yes)

height,width

Set the width and height of the border

scrolling

Is there a scroll bar (yes, no, auto)

src

Specify the file or image called by the iframe (html,htm,gif,jpeg,jpg,png,txt,*.*)

Summary <br />The above is the entire content of this article. I hope it will be of some help to your study or work. If you have any questions, you can leave a message to communicate.