【CSS】圖片不隨著頁面捲動

由於工作上的需要，而在網路上到處爬文，以往這樣的效果是使用Javascript呈現的，不但程式碼攏長而且有時還會卡卡的，或造成畫面閃爍。現在CSS愈來愈強大及瀏覽器版本支援性佳，只要幾行簡單的 CSS 語法便能製作出同樣的效果。而這個 CSS 語法的關鍵便是 position:fixed。

部分HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> '不能省略，效果會跑不出來

<head>

.....省略之.....

/* 右邊圖片按鈕,不隨著捲軸而變動*/

#fixed-ad{ /* 回上一頁 */

background-image:url(/img/back1.png);

width:50px;

height:50px;

position:fixed;

top:200px;

right:0px;

_position: absolute; /* position fixed for IE6 */

_top:expression(documentElement.scrollTop+200);

_right:expression(documentElement.scrollRight+0);

z-index:3;

}

#fixed-ad2{ /* 回主頁 */

background-image:url(/img/back_main.png);

width:50px;

height:50px;

position:fixed;

top:300px;

right:0px;

_position: absolute; /* position fixed for IE6 */

_top:expression(documentElement.scrollTop+300);

_right:expression(documentElement.scrollRight+0);

z-index:3;

}

</style>

.....省略之.....

</body>

</html>

畫面(初始) :

畫面(捲動) :

PS: cursor: pointer; '讓滑鼠指標變成手指圖示

XiaoLian