Is the div tag covered by the object tag?

Time:2020-11-22

The object tag is rarely used now, but it is still used for compatibility.

In the use of the object tag, the object tag of playing video will cover other div tags, making it unable to display normally.

Four pictures
         Nine pictures
         Sixteen pictures
     
     style="position:absolute; visibility:inherit; top:0px;left:0px;width:100px;height:100px;z-index:-1; filter:alpha(opacity=0);">

Solution: div is to be displayed and covered by object. Add an iframe to div, and block the object tag through iframe.

Reason: the object tag is not in the DOM document stream. When parsing, the browser will first place the object at the top level, and then parse the DOM document in turn and place it in the lower level. Therefore, some div tags will be covered by the object tag, so setting Z-index is invalid. Because the iframe tag level is higher than the object tag, we can use iframe in div to solve this problem.

Note: 1. Div must have a specific Z-index which is larger than the Z-index of iframe;

2. The Z-index of iframe must be negative, otherwise, div cannot cover iframe;

3. The top and left of iframe are 0, and the width and height of iframe are equal to the width and height of div, which is just completely covered;

4. Note that the transparency of iframe is set to 0;

5. The iframe is added as a child element of the display Div.