Several situations and solutions when div is blocked by iframe

This article introduces you to some situations where p is blocked by iframe, as well as the solutions after being blocked. Friends in need can refer to it.

Similar structure:

The code is as follows:

http://caibaojian.com">>

The first type: the transparent background is covered

When p uses a transparent background, no matter it is used (opacity or rgba format), except chrome, other browsers

Solution:

Use opaque background or use transparent background image

## Two types: Z-index is invalid in IE8

In IE, introducing video video playback in iframe will cause the z-index of p to be invalid, that is, no matter what the z-index of p is set to, , all covered by 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 is behind other elements

In addition, I saw that flash also has this z-index failure problem, and also adds the above one to flash. Parameter

The code is as follows:

or

The code is as follows:

https://cdn.css-tricks.com/FlashAnimation.swf" type="application/x-shockwave-flash" wMode="Transparent">

Some parameters of appendix iframe

border

The code is as follows:

Set Set the edge width around the frameboder

frameboder

The code is as follows:

Set the width and height of the border

scrolling

The code is as follows:

Whether there is a scroll bar ( yes,no,auto)

src

The code is as follows: