I am working on the TOC page for the Frontend Engineering section of my new website. It is supposed to demo many of my effects and then link to designer and implementer articles on those effects. I challenged myself to put up one effect an hour. That was three hours ago. First effect is not started.

Goal

Am popping up a background, 85% opacity, over all but a 50px border of the TOC page as a background for effects demos. It's got a red "X" for "close me" in the top-right. Position: fixed. (I seldom get a chance to use fixed. It should be happy time.)

Results

In Opera and Firefox, I'm fine. In MSIE, my "fixed" background is laid out after (below—higher Y values) the other content, not over (higher Z values) it. Position "fixed." Right. It's in the markup, with position and size set in the script. Something very wrong.

So, using script, I pluck it off "document.body" and then insert it as the first element of "document.body". Great. Now it is pushing the left-side medallion and the top-of-page banner down below itself. And it is appearing underneath my top-right logo. (Logo zIndex: none. Background zIndex: 2. Naturally, the logo is on top.) Top and left are both set to '50px', but MSIE has positioned it at 10,10 (inside my 10px body margin?).

OK, I'm venting. I hate MSIE. I'm a frontender. Let me count the ways!

Feedback: MartinRinehart at gmail dot com

# # #