Dynamic layering of HTML iFrame for modal control

Dynamic layering of HTML iFrame for modal control

We have a custom HTML control that needs modal operation capabilities. To
accomplish this we use 2 simple overlays (div's): this first is contained
within the document (iFrame) where the modal control is located; the
second overlay is anchored in the "top" document and is supposed to
blanket everything EXCEPT for the aforementioned iFrame.
The first overlay works great, the second one...not so well. From some
reason it refuses to lay behind the iFrame in the zIndex rendering stack -
and so it effectively covers the entire screen, including the iFrame.
For example purposes I'll use static style settings, like so: (example is
Jade syntax)
iframe(class='window_x' id='foo' style='z-index: 2000; position: relative')
The event handler responsible for back-dropping the iFrame with the
overlay has the following logic:
var foo = top.document.getElementById("foo")
var fooZIndex = foo.style.zIndex // using Chrome; registers "2000"
var overlay = top.document.createElement("div")
... clipped settings...
overlay.style.zIndex = fooZindex - 1 // evaluates to 1999
overlay.style.position = "absolute"
var ovl = self.Overlay =
top.document.getElementById("someAnchorPoint").appendChild(overlay)
Q: Can someone point out what I seem to be missing here?
TIA.