使用 CSS 出現滾動條時移動相對 object position

Question

在我的頁面上，我在帶有overflow-y:auto的 div 元素中顯示了一個日志文件。 在 div 的右上角，我用position:relative覆蓋了一個關閉按鈕 div。

當滾動條出現時，按鈕覆蓋在滾動條上，很難看到並且看起來很丑。 你可以在這里看到一個例子： https://jsfiddle.net/4azw0rLf/

當scrollHeight超過clientHeight時，用 javascript 移動它感覺就像一個 hack。 CSS中是否有選項一出現就把關閉按鈕向左移動滾動條的寬度？

Answer 1

您可以包裝終端並將關閉按鈕移到里面。 我從您的代碼開始創建了一個最小示例。

編輯

對於第一個答案，關閉按鈕隨文本一起滾動，我使用position: sticky; 和top:0px;

它並不與所有瀏覽器兼容，但對於大多數瀏覽器，您可以在此處檢查兼容性。

 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>