The chat window in butterfly is supposed to be displayed on top of the website. However, if you have a site with a lot of Flash content, you might face a problem where your Flash content is displayed on top of Flash (see an exemple below).

You can see that some parts of the chat window are going above and some parts are going below the Flash movie.
Trying to tweak the zindex CSS property will not change anything.

Actually, the problem comes from Flash. By default, Flash gets a handle on the browser's window, and directly outputs the content of the movie on top of the HTML.
So by default, Flash bypasses any instructions in CSS that would require the movie to be displayed above or below other HTML elements.

Hopefully, Flash movies come with a "wmode" parameter that can be set to tell Flash to embed the video inside the HTML.
So the solution is simply to modify the "wmode" parameter in the HTML that loads the Flash movie, in this way:

    <object type="application/x-shockwave-flash" ... >
      <param name="wmode" value="Opaque" />
      <embed wmode="Opaque" ...>
      </embed>
    </object>
 

After this, the result is perfect!



You can find more information about the wmode settings here and here.