hyperlink that will follow the position on the screen when pressing ctrl – or + from keyboard in javascript

how do I make this hyperlink follow its position every time I maximize or minimize, press ctrl – or + from my keyboard? I followed this style position property from https://www.w3schools.com/jsref/prop_style_position.asp but only fixed value is the one making the hyperlink appear and it seems that the position just stayed on it’s coordinates.

Looking forward to anyone’s kind assistance. Thank you very much in advance.

// ==UserScript==
// @name         Launch a Web Page
// @namespace    http://your-website.com
// @version      1.0
// @description  Will launch a WebPage
// @author       me
// @match        https://example.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_openInTab
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
'use strict';

// Function to launch the webpage
function launchWebpage() {
    // Adjust the URL to the webpage you want to launch
    const targetURL = 'https://example.com/';
    window.open(targetURL, '_blank');
}

// Create a hyperlink positioned on the upper middle of the screen
const launchLink = document.createElement('a');
launchLink.href = 'javascript:void(0)';
launchLink.textContent = 'WebPage';
launchLink.style.position = 'fixed';
launchLink.style.top = '10px';
launchLink.style.right = '30%';
launchLink.style.transform = 'translateX(-50%)';
launchLink.style.color = 'white';
launchLink.style.padding = '10px';
launchLink.style.borderRadius = '5px';
launchLink.style.textDecoration = 'none';
launchLink.style.fontSize='18px';
document.body.appendChild(launchLink);

// Add event listener to the hyperlink
launchLink.addEventListener('click', launchWebpage);

})();