title: Absolutely position div sits behind textbox in IE7
body: <p>I'm having issues with an absolutely positioned custom drop down, in IE7 the div is sitting behind a normal textbox which is not position in any special way.
  I've already read this topic: <a href="https://stackoverflow.com/questions/3385513/ie7-puts-absolutely-positioned-div-underneath-ignores-z-index">IE7 puts absolutely positioned div underneath, ignores z-index</a> but the solutions didn't help me. </p>
  
  <p>The difference between my code and the person who asked the above question is that my div is being created through javascript using document.write and adding it through appendChild</p>
  
  <pre><code>addEvent(document.getElementById("storeDown"), "click", showRegions);
  var showRegions = function(e) {
          var dd = getTarget(e);
          if(document.getElementById("regionOptions")) {
              dd.parentNode.removeChild(document.getElementById("regionOptions"));
              regionsShowing = false;
          } else {
              var ddNode = document.createElement("div");
              ddNode.id = "regionOptions";
              ddNode.style.backgroundColor = offColor;
              var optNode;
              for(var region in storeList) {
                  optNode = document.createElement("div");
                  optNode.innerHTML = region;
                  ddNode.appendChild(optNode);
              }
              dd.parentNode.appendChild(ddNode);
              regionsShowing = true;
          }
          cancelEvent(e);
      }
  </code></pre>
  
  <p>My parent div has a z-index of 500 and is positioned relative and regionOptions is positioned absolute and I tried to also add a z-index to it but it didn't make a difference.</p>