title: Firefox and Internet Explorer do not position relative to parent if given position absolute
body: <p>I'm having a problem with <code>position: absolute;</code> inside of a container with <code>position: relative;</code></p>
  
  <p>I think, the default behaviour is, that child elements having <code>position: absolute;</code> are positioning theirselfs relative to their parent container, if that one has <code>position: absolute;</code> or <code>position: relative;</code></p>
  
  <p>While trying out this, i found out that FF and IE (newest versions), are showing a different behaviour, placing things absolute to the page. </p>
  
  <p>Am wondering why? Its concerning a drop down menu, where the submenus are taken out of the viewport by <code>left: -9999px;</code> and while hovering they get <code>left: auto;</code></p>
  
  <p>In Chrome, it works fine.
  Sorry if this question was already asked - but using such words to search just shows normal problems with position.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div id="steuerung"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
  
      &lt;ul&gt;
       &lt;li&gt;&lt;a href="#"&gt;Sublink&lt;/a&gt; &lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Sublink&lt;/a&gt; &lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Sublink&lt;/a&gt; &lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Sublink&lt;/a&gt; &lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Sublink&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div#steuerung li {
      display: inline;
      list-style: none;
      position: relative;
  }
  div#steuerung ul li ul {
      position: absolute;
      left: -9999px;
      display: block;
      z-index: 2;
      width: 99%;
  }
  div#steuerung ul li:hover ul {
      left: auto;
  
  }
  </code></pre>
  
  <p>complete Code here: www.step-town.com/new/</p>
  
  <p>Greetings</p>