JavaScriptボタンをクリアする

Question

codyhouse.coの「トップに戻る」ボタンを使用して、私のすべてのサイトページの右下にjavascriptボタンを提供しています。

私はまた、すべてのサイトページの右下に表示されるjavascriptのライブチャット/サポートボタンも使用しています。

私が持っている問題は、彼らがお互いに衝突することです。 「Back to Top」ボタンのCSSを調整してチャットボタンをクリアし、右側に上下のレベルを表示するか、または左に表示するように切り替えてみました。私は運がなかった。続き

は、CSSです：

/*top of page CSS*/ 
.cd-top { 


    height: 40px; 
    width: 40px; 
    position: fixed; 
    bottom: 40px; 
    right: 10px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); 
    /* image replacement properties */ 
    overflow: hidden; 
    text-indent: 100%; 
    white-space: nowrap; 
    background: #78BE20 url(../images/cd-top-arrow.svg) no-repeat center 50%; 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: opacity .3s 0s, visibility 0s .3s; 
    -moz-transition: opacity .3s 0s, visibility 0s .3s; 
    transition: opacity .3s 0s, visibility 0s .3s; 
} 
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { 
    -webkit-transition: opacity .3s 0s, visibility 0s 0s; 
    -moz-transition: opacity .3s 0s, visibility 0s 0s; 
    transition: opacity .3s 0s, visibility 0s 0s; 
} 
.cd-top.cd-is-visible { 
    /* the button becomes visible */ 
    visibility: visible; 
    opacity: 1; 
} 

.no-touch .cd-top:hover { 
    background-color: #e86256; 
    opacity: 1; 
} 
@media only screen and (min-width: 768px) { 
    .cd-top { 
    right: 20px; 
    bottom: 20px; 
    } 
} 
@media only screen and (min-width: 1024px) { 
    .cd-top { 
    height: 60px; 
    width: 60px; 
    right: 30px; 
    bottom: 30px; 
    } 
} 

私はbottomとright値を調整しようとしています。

ご迷惑をおかけして申し訳ありません。

の代わりに：：right : 10px変更をleft : 10pxに

Answer 1

シフトは、それが左にシフトするために、これを行います

---

を残しました。

またはそれに移動したいピクセル数によって決まります。

.cd-top { 
    height: 40px; 
    width: 40px; 
    position: fixed; 
    bottom: 40px; 
    left: 10px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); 
    /* image replacement properties */ 
    overflow: hidden; 
    text-indent: 100%; 
    white-space: nowrap; 
    background: #78BE20 url(../images/cd-top-arrow.svg) no-repeat center 50%; 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: opacity .3s 0s, visibility 0s .3s; 
    -moz-transition: opacity .3s 0s, visibility 0s .3s; 
    transition: opacity .3s 0s, visibility 0s .3s; 
} 

は、メディアCSSの変更を行います。

@media only screen and (min-width: 768px) { 
    .cd-top { 
    left: 20px; 
    bottom: 20px; 
    } 
} 
@media only screen and (min-width: 1024px) { 
    .cd-top { 
    height: 60px; 
    width: 60px; 
    left: 30px; 
    bottom: 30px; 
    } 
} 

---

がちょうど.cd-topとメディアCSSのボトム値を変更し、シフトアップまでのシフト：

.cd-top { 
    display: inline-block; 
    height: 40px; 
    width: 40px; 
    position: fixed; 
    bottom: 140px; 
    right: 10px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); 
    /* image replacement properties */ 
    overflow: hidden; 
    text-indent: 100%; 
    white-space: nowrap; 
    background: rgba(232, 98, 86, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%; 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: opacity .3s 0s, visibility 0s .3s; 
    -moz-transition: opacity .3s 0s, visibility 0s .3s; 
    transition: opacity .3s 0s, visibility 0s .3s; 
} 

@media only screen and (min-width: 768px) { 
    .cd-top { 
    right: 20px; 
    bottom: 120px; 
    } 
} 
@media only screen and (min-width: 1024px) { 
    .cd-top { 
    height: 60px; 
    width: 60px; 
    right: 30px; 
    bottom: 130px; 
    } 
}