問題描述

設計小圈圈在頁面右下角出現。

在ｉｔ幫這邊還正常

https://ithelp.ithome.com.tw/

某些頁面就會跑版

例如：https://www.runoob.com/html/html-examples.html

代碼如下

let css=`
.buttonForBack{
    position: fixed;
    bottom: 100px;
    right: 50px;
    border: none;
    border-radius: 50px;
    height: 40px !important;
    width: 40px !important;
    opacity: 0.75;
    background-color: rgba(18, 17, 17, 1);
    z-index:"999";
}

.circleForBack{
    background-color: rgb(93, 85, 85,0.5);
    border: 2px solid #7B8471;
    height: 54px !important;
    width: 54px !important;
    bottom: 93px;
    right: 43px;
    z-index:"999";
}

.newIn{
    border: 2.5px solid #3CB3E4;
    transform: scale(0.95);
}

.newOut{
    background-color: #3c4143;
    transform: scale(0.95);
}
`

let html=`
<div class="buttonForBack circleForBack"></div>
<div class="buttonForBack newOut"></div>

`

let Inject=document.createElement('div')
Inject.innerHTML=html
document.body.appendChild(Inject)


let Putcss=document.createElement('style')
Putcss.innerHTML=css
document.head.appendChild(Putcss)

const inner=document.querySelector('.newOut')
const outside=document.querySelector('.circleForBack')

inner.addEventListener('click',() => {
    outside.classList.add('newOut')
    inner.classList.add('newIn')

    setTimeout(() => {
        inner.classList.remove('newIn')
        outside.classList.remove('newOut')
},95)

    history.back();
})

解決思考

我懷疑是被其他元素尬到，有調整過z-index給他弄到最高，似乎沒效果。
也試著用強調CSS來設定寬與高度，但調整不動（？
對我來說滿鬼打牆、挫折的，
不知道還有什麼可能性是我沒想到的，該怎麼解決這個問題呢？

謝謝前輩們。