我正在設(shè)計(jì)一個(gè)頁面angular-material,我想在屏幕右下角添加一個(gè)聊天按鈕,當(dāng)我向下滾動(dòng)頁面時(shí),這個(gè)按鈕應(yīng)該滾動(dòng),就像這個(gè)網(wǎng)站一樣:http ://harleytherapy.com/我已經(jīng)完成了大部分部分,即按鈕位于右下角,當(dāng)我開始滾動(dòng)頁面時(shí),它也會(huì)隨頁面滾動(dòng),但唯一的問題是,當(dāng)我到達(dá)底部時(shí),該按鈕位于頁腳后面并變得不可見。當(dāng)我到達(dá)底部時(shí),我希望它保持在頁腳上方。這是我的代碼:<div class="main-content-container"> <button mat-fab class="chat-icon-btn"> <mat-icon class="chat-icon">chat_bubble_outline</mat-icon> </button> <h1>Dashboard <mat-icon aria-label="false">dashboard</mat-icon> </h1> <!-- Some more content --> <footer class="footer"> <span> <a href="#" class="footer-links">Hjem</a><span class="vertical-divider"></span> <a href="#" class="footer-links">Om </a> <span class="vertical-divider"></span> <a href="#" class="footer-links"> Hj?lp </a> <span class="vertical-divider"></span> <a href="#" class="footer-links"> Kontakt os </a> <span class="vertical-divider"></span> <a href="#" class="footer-links"> Webstedsbetingelser </a> <span class="vertical-divider"></span> <a href="#" class="footer-links"> Fortrolighedspolitik</a> </span> </footer></div>CSS:.main-content-container { margin-left: 10%;}.chat-icon-btn { position: fixed; right: 0; bottom: 0; background: #3900B3; color: #fff; font-size: 25px; margin-right: 25px; margin-bottom: 5px;}.chat-icon { margin-right: 0px !important;}.footer { background-color: #3900B3; padding: 50px 0 50px 0; position: relative; text-align: center; margin-top: 100px;}.footer-links { color: #fff; text-decoration: navajowhite; font-size: 18px;}提前致謝。
1 回答

慕斯709654
TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊
為按鈕提供 z-index,使其位于頁腳頂部。
.chat-icon-btn { z-index: 999; }
- 1 回答
- 0 關(guān)注
- 168 瀏覽
添加回答
舉報(bào)
0/150
提交
取消