Example of ZeroClipboard z-index problem

ZeroClipboard's use of z-index is not taking into account stacking contexts. This demonstrates the problem.

by James Greene

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://zeroclipboard.org/javascripts/zc/ZeroClipboard_1.2.3.js"></script>
<div id="root">
    <div id="new-stacking-context-with-high-zindex">
        <button id="zeroClipboard" data-clipboard-text="Ze Copied Text!">Copy</button>
    </div>
</div>

CSS

#new-stacking-context-with-high-zindex {
    /* establish new stacking context and set z-index */
    position: relative;
    /* we have to use a value higher than 10000 b/c there is a bug in ZC 
       where the z-index of the element is not actually used in Chrome, 
       because this line doesn't work when the prop is zIndex, as opposed 
       to z-index:
    
          document.defaultView.getComputedStyle(el, null).getPropertyValue(prop)
    
       If that bug didn't exist, as long as this z-index was higher than 1000, the
       issue would reproduce.
    
    */
    z-index: 15000;
}

#zeroClipboard {
    /* position to set z-index */
    position: relative;
    /* this z-index is low, but relative to siblings of the offsetParent 
       (which establishes the stacking context), it has a z-index of 
       15000. */
    z-index: 1000;
}

JavaScript

var button = document.getElementById('zeroClipboard');

var clip = new ZeroClipboard(button, {
    moviePath: "http://zeroclipboard.org/javascripts/zc/ZeroClipboard_1.2.3.swf",
    trustedDomains: ["*"],
    allowScriptAccess: "always"
});

clip.on("load", function (client) {
    console.log("Flash movie loaded and ready.");

    clip.on('complete', function (client, args) {
        alert('Copied "' + args.text + '" to clipboard');
    });
});