Mi objetivo es tratar de mantener la ubicación de mi elemento cuando ajuste mi navegador o cambie a una pantalla más grande.
He creado una pequeña función deslizante que cuando hago clic en cada botón, mi elemento .trans1 va y viene entre los botones.
El problema que tengo es que mi elemento trans1 se sale del botón al cambiar el tamaño del navegador, espero que todo tenga sentido y que alguien pueda ayudar.
const tranImg= document.getElementById('trans'); window.onload= trans; // Make the trans move back and forth. function trans(){ console.log('test click') tranImg.style.transform = 'translatex(0%)'; const xhr = new XMLHttpRequest(); xhr.open("GET", "splash.html"); xhr.onreadystatechange = () => { if(xhr.readyState === 4){ document.querySelector(".app").innerHTML = xhr.response; } }; xhr.send(); }; // Make the trans move back and forth. function trans2(){ console.log('hey trans2') tranImg.style.transform = 'translatex(180%)'; const xhr = new XMLHttpRequest(); xhr.open("GET", "website.html"); xhr.onreadystatechange = () => { if(xhr.readyState === 4){ document.querySelector(".app").innerHTML = xhr.response; } }; xhr.send(); }; .trans-container { position: relative; top: 220px; width: 100%; height: auto; } #make-trans { display: flex; position: relative; width: 100%; } .trans1 { z-index: 980; margin-top: 3px; left: 11%; position: relative; top: 0.2px; transition: transform 0.8s; } <div class="selectBtns"> <button class="btns" id="btn2" onclick="trans()">Landing page</button> <button class="btns" onclick="trans2()">Website</button> </div> <div class="trans-container"> <div id="make-trans"> <img id="trans" class="trans1" src="./images/svg-path (1).svg" alt="transition tab" width="400px"> </div> <div class="xml-change"> <div class="app"></div> </div> </div>