沒有什么問題是用一個(gè)div解決不了的，如果有，那就用兩個(gè)。
很多網(wǎng)站右側(cè)都有一個(gè)或多個(gè)懸浮的按鈕，不管頁面滑動(dòng)到哪，它就在你眼皮底下，今天就來實(shí)現(xiàn)這個(gè)懸浮的button。
Requirement:
實(shí)現(xiàn)跟隨頁面滾動(dòng)的懸浮按鈕。
Implementation:
- 首先我們要?jiǎng)?chuàng)建一個(gè)父div，把要放置的按鈕都寫在這個(gè)div中。
html:
<body>
<div class="main-container">
<div class="main-content"> //網(wǎng)頁的主要內(nèi)容
</div>
<div class="float-button"> //懸浮按鈕
</div>
</div>
</body> -
通過css給這個(gè)父div設(shè)置屬性，使其固定在屏幕上。
CSS:
.float-button {
position: fixed; //關(guān)鍵
height: 90px;
width: 40px;
bottom: 90px;
right: 50px;
background: #b4d145;
}
大功告成：
Paste_Image.png
右側(cè)有了一個(gè)懸浮的div（瀏覽器的滾動(dòng)條為證），將想要懸浮的內(nèi)容寫在這個(gè)div里面就可以了，是不是很簡單。?????
