title: Positioning the drop down window of a HTML SELECT
body: <p>I am using an HTML SELECT tag and want to make sure the window that opens when the user hits the arrow to position below the "textbox" part of the control.</p>
  
  <p>The problem is that IE seems to just open the window arbitrarily depending on the selection but I need to ensure consistent positioning as there are other elements on the page that need to remain visible at all times</p>
  
  <p>Here's the current markup</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="margin-left: 5px; margin-top: 5px"&gt;
          &lt;div style="position: relative;"&gt;
              &lt;select style="position: absolute; top: 10px; left: 10px;"&gt;
                  &lt;optgroup label="Choice A"&gt;
                      &lt;option value="A-A"&gt;Sub choice A&lt;/option&gt;
                      &lt;option value="A-B"&gt;Sub choice B&lt;/option&gt;
                  &lt;/optgroup&gt;
                  &lt;optgroup label="Choice B"&gt;
                      &lt;option value="B-A"&gt;Sub Choice A&lt;/option&gt;
                      &lt;option value="B-B"&gt;Sub Choice B&lt;/option&gt;
                  &lt;/optgroup&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/SWy5M.png" alt="This is whats happening"></p>