En mi página, estoy mostrando un archivo de registro en un elemento div con overflow-y:auto . En la esquina superior derecha del div, superpongo un div de botón de cierre con position:relative .
Cuando aparece la barra de desplazamiento, el botón se superpone a la barra de desplazamiento, lo que es difícil de ver y se ve feo. Puede ver un ejemplo aquí: https://jsfiddle.net/4azw0rLf/
Moverlo con javascript cuando scrollHeight excede clientHeight se siente como un truco. ¿Hay una opción en CSS para mover el botón de cerrar a la izquierda por el ancho de la barra de desplazamiento tan pronto como aparece?
Puede envolver su terminal y mover su botón de cierre adentro. Creé un ejemplo mínimo a partir de su código.
EDITAR
Con la primera respuesta, el botón de cerrar se desplazó junto con el texto, lo corregí usando la position: sticky; y top:0px;
No es compatible con todos los navegadores, pero con la mayoría, puedes consultar la compatibilidad aquí .
const terminal = document.getElementById("terminal"); addText = () => { terminal.innerHTML += "overflowing line<br>"; } #container-terminal { position: relative; overflow-y: auto; border: 2px solid; height: 100px; width: 200px; } #terminal { position: absolute; height: 100%; width: 100%; } #closeBtn { background-color: red; position: -webkit-sticky; position: sticky; top:0px; width: 20px; display: inline-block; float: right; } <div onclick="addText()" style="cursor:pointer;">Click to add text</div><br> <div id="container-terminal"> <div id="terminal">CSS only<br>CSS only<br>CSS only<br>CSS only<br>CSS only<br></div> <div id="closeBtn">X</div> </div>