title: Getting around IE z-index issues to put a modal *on top of* a YUI Panel
body: <p>I have an informational pop-up modal in my web application, which is basically just a <code>&lt;div&gt;</code> with its "<code>display</code>" CSS attribute set to "<code>none</code>".  A snippet of JavaScript toggles that display attribute when the modal needs to appear.</p>
  
  <p>In most places where this modal can be activated, it works just fine.  However, there is one page on the site where some old YUI code brings up a modal in the form of a "<code>YAHOO.widget.Panel</code>" object.  When someone triggers the informational event inside of this YUI modal, I need my informational modal to still appear <strong>on top of</strong> the YUI one.</p>
  
  <p>This works fine in all browsers other than IE.  However, in IE the informational modal is completely hidden because it appears behind the YUI one.</p>
  
  <p>There are a number of questions on StackOverflow related to "<code>z-index</code>" CSS issues in IE, but most of them seem related to layout issues on the initial page load.  The problem I'm running up against is the YUI Panel being created on-the-fly after page load.  </p>
  
  <p>No matter how high I set the z-index for my informational modal (nor how low I tell YUI to set the z-index for its modal)... IE always gives the YUI panel a higher z-index because it was created later.</p>
  
  <p>Is there any clean workaround for a situation like this... where you need IE to give a higher z-index to a <code>&lt;div&gt;</code> created at page load time than to one created by JavaScript <em>after</em> the page load?</p>