Solve various situations where divs are blocked by iframes

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">

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 will have p covered by iframe.

Solution:

p Use an opaque background or use a transparent background image.

Second type: z-index failure in ie8

In ie, introduce video into iframeVideoplay This will cause the z-index of p to be invalid, that is, no matter what the z-index of p 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 is behind other elements

In addition, I saw that flash also has the problem of z-index failure. I also add the above parameter to flash.

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 the edge width around the picture and text frame

frameboder

The code is as follows:

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

##height,width

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:

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

Summary【Related recommendations】

1.

Html free video tutorial

2.

Teach you how to insert links in html

3.

Teach you how to parse html under nodejs

4.

Share a super comprehensive summary of HTML and CSS knowledge points

5.

Detailed explanation of Html5 datalist tags and dynamic matching with background data

The above is the detailed content of Solve various situations where divs are blocked by iframes. For more information, please follow other related articles on the PHP Chinese website!