title: How to make a div fixed on the same position, no matter what screen size
body: <p>I have the following problem: I want to put two bars, which got a either green or blue filling, in the bottom right. The problem is that those bars are not staying in the place they should. I want to fix them at the same position, no matter what screen size.
  <a href="https://i.stack.imgur.com/5OcVU.png" rel="nofollow noreferrer">As you can see, here they are out of the screen</a></p>
  <p>Here is the CSS-Styling + HTML</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.element-1 {
    writing-mode: tb-rl;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 10%;
    height: 20px;
    position: fixed;
    margin-top: 38.5%;
    margin-left: 75.5%;
  }
  
  .element-2 {
    writing-mode: tb-rl;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 10%;
    height: 20px;
    position: fixed;
    margin-top: 38.5%;
    margin-left: 91.7%;
  }
  
  .meter {
    background: rgba(65, 60, 60, 0.39);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    box-shadow: inset 0 -1px 1px rgb(184, 45, 45);
    display: block;
    top: 8%;
    width: 270px;
    height: 20px;
    margin-bottom: 10px;
    padding: 5px;
    margin-left: 10px;
    position: absolute;
  }
  
  .meter&gt;span {
    display: block;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #2bc253;
    background-image: linear-gradient(to bottom, #0ff, #1e90ff);
    box-shadow: inset 0 2px 9px rgba(51, 48, 48, 0.3) inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: width 2s ease-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bars"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;div class="meter cadetblue element-1"&gt;
          &lt;span data-progress="0" style="width:0;" id="bar-hunger"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="meter element-2"&gt;
          &lt;span data-progress="0" style="width:0;" id="bar-thirst"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>