It's not thematic's z-index system, it's how css works. And you are certainly not the only one being frustrated and annoyed in trying to understand it. :)
Z-index and positioning of elements are two of the trickier things to figure out. And of course, IE has its own way of doing things. If you want to read some nitty gritty details, see http://sweatte.wordpress.com/css-tips/#zindex
The default behaviour when no z-index is set is that the element that comes later in the source code will overlap the earlier ones. The z-index lets you override this and specify a stacking order, but in order to apply a z-index you need to also have a positioning set like I wrote above. The highest z-index goes on top. Sounds simple, right?
But - and here comes the tricky part - you also need to consider the nesting of elements. When you specify a position on the #main div, the #access div that is inside it will not be able to jump out of its container and the z-index will refer to its siblings inside of #main instead of the order of the whole document. In order for the #access div to move outside of its container, remove the positioning from #main (this will of course also make the z-index be ignored). This is similar to how absolute positioning works when the parent element has no positioning set vs if it has. In the first case, your absolute positioning will refer to the whole page, but as soon as the parent element has a positioning, your position:absolute will be relative to the parent element instead.
Clear as mud? You can play around with http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp to see how the different declarations make the elements behave.
I am not 100% sure on what effect you are after, but if you want the access div to be above main and the header and footer divs on top of that, i suggest something like this:
If main has any positioning set, remove that declaration or bring back the default behaviour with