position:fixed定位問題(以top鈕為例)

由於定位的效果，不受其他區塊影響，等於寫了定位效果之後，定位的區塊在html裡面就是獨立的個體了！
如果現在要寫一個跟著螢幕浮動(position:fixed)的top鈕，
如下圖(讓top鈕緊跟在內容區塊旁邊)：

html:
＜body＞
＜div class="bg"＞內容內容內容內容內容內容內容＜/div＞
＜a href="#" class="topBtn"＞＜/a＞
＜/body＞

css:
/*內容區塊*/
.bg {
background-color:#CCC;
width:600px;
height:800px;
margin:0 auto;
}

/*top鈕*/
a.topBtn {
display:block;
background-image:url(images/btn_top.png);
width:36px;
height:36px;

position:fixed;
bottom:50%;
right:490px;/*或寫left:1150px;*/
}

a:hover.topBtn {
background-image:url(images/btn_top_a.png);
}


如果直接寫position的left或right來定位，就會遇到以下問題：
當瀏覽器視窗縮小後，top鈕就會因為定位而被寫死，

如果寫的是right:490px;
不管你縮多小，定位永遠都是從右邊算起490px，
所以只要視窗一縮小，top鈕就會遮到內容區塊啦!(如下圖)



那如果是寫left:1150px;呢?
同理，定位永遠從左邊算起1150px，
所以如果瀏覽器縮小，top鈕就跑出去不見人影了! (如下圖)




─────────────────────────────
解決方法:
先將top鈕放進內容區塊裡，如下：

html:
＜body＞
＜div class="bg"＞
內容內容內容內容內容內容內容
＜a href="#" class="topBtn"＞＜/a＞
＜/div＞
＜/body＞

再來就是css！
把定位的部分改為margin-left的定位方法！
a.topBtn {
display:block;
background-image:url(images/btn_top.png);
width:36px;
height:36px;

position:fixed;
bottom:50%;
margin-left:610px; /*改用margin-left來定位*/
}

這樣top鈕的定位，就會從內容區塊開始算起，而不是從視窗的最邊邊算起了！
不管怎麼縮放，都不用擔心亂跑啦～(如下圖)



─────────────────────────────
一定有人想到，那如果用第一種position的left、right來定位，但是把top鈕放進內容區塊呢?

答案是不行的喔！因為一開始說的，定位的區塊在html裡面會變成獨立的個體，並不受其他區塊影響喔~