HTML中設置在瀏覽器中固定位置fixed定位


之前的博文 HTML布局排版之制作個人網站的文章列表,中鏈接到的文章本身,也需要返回到列表主頁,可在每個文章頁面加導航條,也可以只加個返回到列表主頁的鏈接。
剛開始是想在博文最下方,加個返回文章列表的鏈接,但是有些博文很長,需要到最下方再返回比較麻煩,如果在每個頁面加導航條也可以,但是長博文需要回到上面再點導航條,也有點麻煩。
如果有個方法在頁面滾動條滾動后,還能讓某元素固定在瀏覽器的固定位置就比較方便了,查看了下css樣式里的position定位,里面個fixed定位。

把返回這個鏈接用fixed定位后,位置固定,無論瀏覽到文章的哪個地方,都可以直接找到返回鏈接,不用再拖滾動條,或者鼠標滑輪,感覺還是挺方便的。返回鏈接設置的比較小,也不會遮擋文章內容,可以掛在瀏覽器右側效果感覺還可以。

本文測試用的是一個圖片,本來是用的給圖片加上鏈接,但是由於這個返回圖片做的不是很喜歡,考慮到以后需要更換,如果用img圖片,給圖片加鏈接,那么一旦更換圖片,需要每個文章頁面都要更換圖片的src路徑,比較麻煩,所以用了css樣式背景圖的方式,這樣需要修改圖片,只需要修改css里的樣式路徑,修改一次就行了。
給需要的a標簽設置樣式。
1.a標簽設置寬高,給a標簽加背景圖。
2.給a標簽設置fixed定位,設置位置,例如top,right。

頁面代碼:

<div id="back"><a href="../p1.html"><img src="../images/fixedback.png"></a></div>

樣式代碼:

#back a{position:fixed;width:97px;height:62px;top:30px;right:5px;background-image:url(../images/fixedback.png);}

圖示:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM