Vertical positioning (stacking) of elements incorrect in IE

Question

Hello. I have this simple:

<script type="text/javascript">
$("#message").fadeIn("slow");
</script>

<div id='message' style="display: none;">
    <span>Hey, du har fået +1 points, du har nu <u>2929</u></span>
    <a href="#" class="close-notify" onclick="closeNotice()">X</a>
</div>

And i have a design on my site. When i use this, it works and shows it "over" the design, but when i try to view in IE, it shows it "under" the design..

Does it matter where the <div> box is? why is it so it shows correct in FF but not IE?

Answer 1

Without the CSS rules applied to #message, it is hard to properly answer the question. That being said, I assume you want to create a notification box that resembles the ones on Stack Overflow.

In order to have an element positioned above another, you must assign a z-index to the element. z-index is a property only evaluated on positioned elements therefore you must also position your <div>.

The following CSS should position your <div> above all content.

#message {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50; /* Anything higher than 1 will do */

  height: 26px;
  width: 100%;
}