將DIV區塊固定在畫面某一處

常常有人在問我說要怎麼做出讓區塊固定在畫面上的右側
而且不會因為畫面項下捲動而區塊就消失
今天~~就是要來介紹這種方法
這個方式非常的簡單利用CSS就可以達成
但是請注意!!如果是IE瀏覽器要IE8+以上才可以正常使用唷~!
首先我們先建立一個DIV tag並設定其class名稱為「fix」

<div class="fix">123</div>

緊接著我們就要開始設定CSS的部分了

body{
  height:5000px;
  background:#FF0;
}
.fix{
  width:60px;
  height:60px;
  border:1px solid #000;
  position:fixed;
  top:50px;
  right:0px;
  background:#F00;
}

上述CSS CODE中我們為了方便讓大家看的明顯一點
所以另外替Body設定了一點點樣式
將body的高度設定為5000px是為了讓畫面出現下拉卷軸
被景色設不設定都沒差，這邊設定只是讓大家可以看到它的Z軸呈現

接著就要設定DIV區塊的樣式了
首先我們位fix定義寬高這樣才能讓區塊顯示在畫面上(否則區塊大小只會剛好符合文字123的寬高)
緊接著設定border邊界讓區塊看起來更明顯一點
再來用CSS的position屬性將區塊位置設定為fixed(固定)
然後設定區塊距離畫面頂端的距離跟右側的距離
如果要讓區塊固定在左側拿掉right:0px;這個屬性即可
最後被景色看各位要不要設定都可以

看起來很麻煩的東西透過CSS也可以輕鬆解決，不過若是有IE8以下的用戶就需要用JQuery或是JS來另外處理了
Dome

See the Pen 將區塊固定在畫面某一處 by jen (@jen_huang) on CodePen.