title: Get the top position value of an element then add a percentage to it in JS
body: <p>I am trying to create a function that adds 50% to the "top" value of the elements of an Array. So far I only managed to retrieve the position but in pixels and I am not sure how to add "50%" to those values. I also think there has to be an easier way to achieve this?</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-js lang-js prettyprint-override"><code>const aboutTags = Array.from(document.querySelectorAll(".about-tag"));
  
  document.querySelector(".about-personal-container").addEventListener("mouseover", function() {
  
    const filteredTags = aboutTags.filter(tag =&gt; tag.classList.contains("personal-tag"))
  
    const getTagPosition = filteredTags.map(tags =&gt; tags.style.top = tagPosition = window.getComputedStyle(tags).getPropertyValue('top'));
  
    console.log(getTagPosition)
    //This gives the element top position but in pixels
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#about-section {
    background: black;
    height: 100vh;
    position: relative;
    color: white;
  }
  
  .personal-tag {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 10px;
    transition: all 1s;
  }
  
  .personal-tag1 {
    top: 5%;
    left: 15%;
  }
  
  .personal-tag2 {
    top: 15%;
    left: 35%
  }
  
  .personal-tag3 {
    top: 25%;
    left: 65%
  }
  
  #about-inner-grid-wrap {
    border: 1px solid blue;
    width: 300px;
    height: 50%;
    position: absolute;
    left: 40%;
    top: 50%;
    display: flex;
  }
  
  .about-inner-grid-tag-container {
    height: 100%;
    border: 1px solid white;
    flex: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="about-section"&gt;
    &lt;span class="about-tag personal-tag personal-tag1"&gt;Personal tag&lt;/span&gt;
    &lt;span class="about-tag personal-tag personal-tag2"&gt;Personal second&lt;/span&gt;
    &lt;span class="about-tag personal-tag personal-tag3"&gt;Personal third&lt;/span&gt;
    &lt;span class="about-tag personal-tag personal-tag4"&gt;Personal tag&lt;/span&gt;
    &lt;span class="about-tag personal-tag personal-tag5"&gt;Personal tag&lt;/span&gt;
  
    &lt;div id="about-inner-grid-wrap"&gt;
      &lt;div class="about-inner-grid-tag-container about-personal-container"&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see when the container is hovered, I'm just able to get a log with the position in pixels. How could I simply add 50% to the top postion of each "personal-tag"?</p>