別眨眼網

懸浮框是什麼？大家不一定清楚，但是說網站上怎麼都關不完的小廣告，估計人人都被它噁心過，不管你怎麼滾動網頁，這些小廣告始終會出現在你的螢幕上。今天我們就來聊聊這些小廣告背後的原理——懸浮框。

什麼是懸浮框？

懸浮框是Web前端開發中的一種常見的網頁特效，它懸浮於網頁內容之上，不受捲軸的影響，可以一直處於瀏覽器的可視區域內。

透過懸浮框，我們可以為使用者展示一些特定的資訊（如提示資訊、廣告資訊），也可以在懸浮框中提供一些常用的按鈕（如“返回頂部”按鈕、“分享”按鈕）方便使用者操作。

下面為大家展示一些網頁中常見的懸浮框效果。

（1）當用戶使用百度進行搜尋時，在搜尋結果頁面的頂部會出現懸浮框。該懸浮框會一直懸浮在網頁頂部，不受使用者滾動頁面的影響，如下圖所示。

（2）使用者在騰訊網瀏覽新聞時，右下角會出現兩個小按鈕，分別是“使用者反饋”和“^”（返回頂部），這兩個小按鈕就是透過懸浮框來實現的，如下圖所示。

如何實現懸浮框？

對於Web前端開發不熟悉的朋友們來說，也許會覺得懸浮框做起來很不容易，需要用大量的JavaScript程式碼才能實現。

實際上，懸浮框做起來很簡單，它主要是透過CSS程式碼來實現的。在學習CSS的時候，大家是不是都學過定位（position）呢？還有印象嗎？

我們來回顧一下。在CSS中，position屬性可以設定元素的定位方式。position屬性有4個常用的可選值，分別表示的含義如下。

static：靜態定位（預設定位方式）。

relative：相對定位，相對於其原文件流的位置進行定位。

absolute：絕對定位，相對於其上一個已經定位的父元素進行定位。

fixed：固定定位，相對於瀏覽器視窗進行定位。

在回顧了position屬性的4個可選值以後，請大家思考一下，實現懸浮框，應該使用哪一種定義方式呢？

答案是：fixed固定定位。

當對元素設定固定定位後，該元素將脫離標準文件流的控制，始終依據瀏覽器視窗來定義自己的顯示位置。不管瀏覽器捲軸如何滾動，也不管瀏覽器視窗的大小如何變化，該元素都會始終顯示在瀏覽器視窗的固定位置。

下面我們透過一個具體案例來實現懸浮框效果，案例的效果圖如下所示。

在上圖中，頁面右下角的“返回頂部”就是一個懸浮框，當用戶單擊該懸浮框後就會返回頂部。

下面講解本案例的具體實現步驟。

（1）建立一個HTML檔案，在檔案中編寫簡單的網頁結構和內容，具體程式碼如下。

<！DOCTYPE html> <！—— 此處用於編寫網頁結構 ——>

（2）在第11行程式碼的位置，新增如下程式碼，為網頁填充內容，並完成懸浮框的頁面結構。

上述程式碼中，第2~7行程式碼用於簡單填充網頁內容，使網頁出現捲軸；第10~13行程式碼用於實現懸浮框結構。

（3）在