Anychart, Fusioncharts, or other flash div layers always float on top of the top __div

Source: Internet
Author: User

The div layer is determined by the z-index of the Div's style, and the z-index is the coordinates of the vertical screen, the 0 smallest, the larger the position.

Because Fusioncharts charts are placed in a div, if the page has other Div, it will be blocked by the fusioncharts layer. However, setting Z-index does not work, and the other div is still blocked. After searching on the web, it turns out that:

The flash diagram is always on top by default, referring to the following documentation:

<param name= "wmode" value= "Transparent" >

<param name= "wmode" value= "Opaque" >

<param name= "wmode" value= "Window" >

Note: Support other browsers (Firefox opera etc.) then use the <embed wmode= "Transparent"/> To add embed values to the Wmode node.

Window mode

Display mode by default, in which Flash Player has its own window handle, which means that the Flash movie is a display instance that exists in Windows and is above the browser's core display window, so flash just looks like it appears in the browser. But it is also the fastest and most efficient rendering mode for Flash. Because he is a browser-independent HTML rendering surface, this results in the default display mode where Flash always hides all of the DHTML layers that coincide with him.

But most Apple browsers allow the DHTML layer to show up on Flash, but when the Flash movie is played it can be a bit weird, like the DHTML layer showing an exception as if it were scraped off by Flash.

Opaque mode

This is a windowless mode in which Flash Player does not have its own window handle, which requires the browser to tell Flash Player the time and place to draw on the browser's render surface. The Flash movie will not be above the browser's HTML rendering surface but on the same page as other elements, so you can use the Z-index value to control whether the DHTML element is masking flash or being obscured.

Transparent mode

Transparent mode, in which Flash Player will stage the background color alpha value of 0 and will only draw objects that are actually visible on stage, and you can also use Z-index to control the depth value of the Flash movie. However, unlike the opaque mode, this reduces the playback effect of the Flash movie, and the Flash Player version set wmode= "opaque" or "transparent" before 9.0.115 causes Full-screen mode to fail.

Understand the various modes of implementation and significance in the future development can be based on the specific circumstances of the choice to set the value of the Wmode property.

So as long as the flash wmode set to opaque on the line. So in the page load Fusioncharts chart, modify the parameter wmode, on the page load Flash JS Code added this sentence chart.addparam ("wmode", "Opaque"); it's okay.

In Anychart, modify the Anychart.js file


Wmode: "Opaque",  

and page calls when setting:

    This.wmode = "opaque";  


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.