2014
12
01

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

關鍵字:position:fixed定位

由於定位的效果,不受其他區塊影響,等於寫了定位效果之後,定位的區塊在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裡面會變成獨立的個體,並不受其他區塊影響喔~
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所