title: Why are media queries impacting element positioning?
body: <p>If I use a media query to control CSS for a single max screen width I can control the position of elements displayed at that screen width as you would expect (e.g. using 'top', 'left', etc.).</p>
  <p>But if I add breakpoints, then I can no longer control the position of elements in this way. Why?</p>
  <p>For example, here in the CSS I have a media query for '1ST WIDTH' which leads to content rendering as you would expect. But, if you uncomment the media query for '2ND WIDTH', these new position values are used by the browser even at the 1st width. Why?</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;main-container&quot;&gt;
          &lt;div class=&quot;text-one&quot;&gt;
              Some text
          &lt;/div&gt;
          &lt;div class=&quot;text-two&quot;&gt;
              A bit more text
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <pre><code>  *{
      margin: 0;
    }
  :root {
      font-size: 50px;
  }
  /* 1ST WIDTH */
  @media only screen and (max-width: 480px) {
      .main-container {
          background-color: rgb(239, 237, 244);
          /* position: relative; */
  
      }
      .text-one {
          text-align: left;
          top: 35%;
          left: 5%;
          position: absolute;
          font-size: 1rem;
          border: 3px solid red;
      }
      .text-two {
          text-align: left;
          top: 70%;
          left: 5%;
          position:absolute;
          font-size: 0.5rem;
          border: 3px solid purple;
      }
  }
  
  /* 2ND WIDTH */
  /* @media only screen and (max-width: 600px) {
      .main-container {
          background-color: rgb(239, 237, 244);
  
      }
      .text-one {
          text-align: left;
          top: 5%;
          left: 5%;
          position: absolute;
          font-size: 1rem;
          border: 3px solid red;
      }
      .text-two {
          text-align: left;
          top: 70%;
          left: 5%;
          position:absolute;
          font-size: 0.5rem;
          border: 3px solid purple;
      }
  } */
  </code></pre>