title: How to achieve absolute text position in html css whilst considering scaling?
body: <p>I have been trying to solve this problem where I want the text "Sample" and then I want texts "bla1" and "bla2" to the right of text "Sample". I also want them to stay together when someone scales up and down their browser. So 100% and 200% zoom on any browser should not change the relative positioning of the texts. Any help is much appreciated! If javascript can solve the problem, I'll use javascript.</p>
  
  <p>This photo explains what I want</p>
  
  <p><a href="https://i.stack.imgur.com/YHmfH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YHmfH.png" alt="enter image description here"></a></p>
  
  <p>See the code here: <a href="https://codepen.io/anon/pen/KZBzmY#anon-login" rel="nofollow noreferrer">https://codepen.io/anon/pen/KZBzmY#anon-login</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="tophead"&gt;
    &lt;a href="index.html"&gt;
      &lt;h1 class="webHeader"&gt;Sample&lt;/h1&gt;
      &lt;h1 class="webHeader2"&gt;bla1&lt;/h1&gt;
      &lt;h1 class="webHeader3"&gt;bla2&lt;/h1&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#tophead {
    margin: 0px;
    padding: 0px;
    border: 2px solid black;
    position: absolute;
    left: 40%;
    font-family: Arial;
    color: #00284d;
  }
  
  #tophead h1 {
    margin: -2px;
  }
  
  #tophead a:link {
    text-decoration: none;
    color: #00284d;
  }
  
  .webHeader {
    top: -50%;
    left: -20%;
    font-size: 180%;
    position: relative;
  }
  
  .webHeader2 {
    text-align: right;
    font-size: 100%;
    position: relative;
  }
  
  .webHeader3 {
    text-align: right;
    font-size: 90%;
    position: relative;
  }
  </code></pre>