Temporarily set all css z-index to "none"

Question

How can i walk through all elements and if there is an associated z-index style applied to any elements, set that z-index style to none...?

Then upon completion of the following function, return the original z-index's to there original value.

The small script i am working with.

$(document).ready(function() {

$("<div/>", {
  "class": "DooSuperOverlay"
})
.prependTo("body")
.animate({opacity: 1.0}, 3000)
.fadeOut("slow");

});

Im afraid if there are z-index's applied to the main containing elements in the style sheet, this effect wont work the way it is on the current demo i have. here.

The css may be helpfull:

.DooSuperOverlay {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    background-color:#000;
    z-index:10000;
    }

#%id% {
    position:relative;
    z-index:10001;
}

#%id% .outer_box {
    position:relative;
    z-index:10001;
}

#%id% .inner_box {
    position:relative;
    z-index:10001;
}

If there is any containing div wrapping the #%id% div with a z-index applied it does not work, even if the offending z-index = 1.. ok if z-index:none (defined but as "none")

Here is the html of the css above:

<!--doobox stack begin http://www.doobox.co.uk -->
    <div class="outer_box">
        <div class="inner_box">
        %slice% <!--replaced with content -->
        </div>
    </div>
<!--doobox stack end http://www.doobox.co.uk -->

eg of css that breaks this script:

#container{z-index:1;}

<div id="container">
<!--My html resides here and if any parent has z-index like eg, no matter of value unless none.. this script breaks -->
</div>

Answer 1

Iterating through the DOM using $('*') would be very expensive. But since the function your running is on document ready then you will know immediately if you have set up any z-index properties > 10000. My best suggestion to you is to simply keep track of the elements you are setting a z-index on. Basically you know know that you probably should never sent a z-index > 10000.

Here is what I would do. Make some limits

Layer 0 (z-index = 0 or none)
  Body
  Navigation
  Other elements

Layer 1 (z-index = 100)
  Some modal dialogs


Layer 2 (z-index = 200)
  a Bar Chart
  a pie Chart

...
Layer n 

Keep going until you cover all the layers you need and manager your z-indicies through your own custom design standards

Answer 2

I am posting answer instead to be able to format some code.

First: I have interpreted it as the expected behaviour is the overlay fading but on the test page the overlay fading never happens. The #content div has z-index:auto on your example page and changing it to z-index:1 after page has loaded doesn't change anything. I am using Firefox 3.6.3 on Ubuntu.

If I change

<div class="DooSuperOverlay" style="opacity: 1; display: none;"></div>

to

<div class="DooSuperOverlay" style="opacity: 1; display: block;"></div>

once the page has loaded it works just fine so it is probably not a z-index issue.

I suspect it has something to do with:

.animate({opacity: 1.0}, %id=delay%000)

Why is it there? The div already has 1 in opacity and it may interfere with the next line

.fadeOut("slow");

as it does the opposite ie animate({opacity:0})

Also is there no way you can insert

 <div class="DooSuperOverlay"></div>

directly in html code as now the overlay won't be added until after the page has finished loaded.