title: Media query ignores position:fixed
body: <p>I've looked everywhere for a solution to this and can't believe the answer has eluded me so far. My appearance here is a last resort. Hope you don't mind me picking your brains.</p>
  
  <p>In a website I am building I am trying to position a graphic at the top right of the screen. Then when the window is narrowed to 760px or less, I want it to move to the bottom. No matter what I do the thing just will not move to the bottom. It stays at the top. Here is some very simple code, and it doesn't work here either:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css.css" id="theme_color"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="mydiv"&gt;HELLO!&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  .mydiv { 
      position:fixed;
      top:0;
      right:0;
  }
  
  @media only screen and (max-width: 760px) {
  
  .mydiv { 
      bottom:0;
  }
  }
  </code></pre>
  
  <p>That's all the code there is. You cab see that the word 'hello' appears top right. But when you make the browser window narrow, instead of moving to the bottom as I want, it stays at the top.</p>
  
  <p>BUT... if alter the CSS, so that the div starts at the bottom (wide screen) and moves to the top on narrowing, it works as it should:</p>
  
  <pre><code>.mydiv { 
      position:fixed;
      bottom:0;
      right:0;
  }
  
  @media only screen and (max-width: 760px) {
  
  .mydiv { 
      top:0;
  }
  }
  </code></pre>
  
  <p>Totally stumped. Ideas? Tried Chrome, FF and IE, all latest versions. Windows 7.</p>
  
  <p>Thanks.</p>
  
  <p>Mark</p>