jquery div on top of another div
<p>I have a web page that contains a div element called #order_details that is hidden.  When a user clicks on a button, then the #order_details div element appears.  It appears that the div element has a z-index of 6500 which I have verified is the highest z-index in the entire site.  It is also using jQuery because I see code like:</p>

<pre><code>$('#order_details').show();
</code></pre>

<p>which I know shows the #order_details div element.</p>

<pre><code>&lt;html&gt;
    ...
    ...
    &lt;div id="button"&gt;&lt;/div&gt;
    &lt;div id="order_details"&gt;

        &lt;div id="button2launch_SURVEY"&gt;&lt;/div&gt;
        &lt;div id="survey"&gt;
        &lt;/div&gt;

    &lt;/div&gt;
&lt;/html&gt;
</code></pre>

<p>Now I've added a new div element called #survey and when I click on a button in the #order_details div I want the survey to appear on the top.</p>

<p>I have set the z-index in the css #survey to be 6599.  Then I setup some jQuery to show the div.</p>

<pre><code>$('#survey').show();
</code></pre>

<p>the #survey div appears, but it is not on top of the #order_details div.</p>

<p>My question is:</p>

<p>Isn't setting the z-index property of #survey to a higher value supposed to ensure that the #survey div will appear at the top?</p>

<p>Any help would be greatly appreciated...</p>
