當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

css fixed固定定位屬性

css fixed固定定位屬性

更新時間:2023-06-11 文章作者:未知 信息來源:網絡 閱讀次數:

網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。

【實例介紹】

css fixed固定定位屬性

當容器的position屬性值為fixed時,這個容器即被固定定位了。固定定位和絕對定位非常
相似,不過被定位的容器不會隨著滾動條的拖動而變化位置。在視野中,固定定位的容器的位
置是不會改變的。

【基本語法】

position: fixed 

left:auto   |   長度值   |   百分比
right:auto  |   長度值  |   百分比
top:auto  |   長度值  |   百分比
bottom:auto  |   長度值  |   百分比

【語法介紹】

定位的方法為在CSS中設置容器的top(頂部)、bottom(底部)、left(左邊)和right(右
邊)的值,這4個值的參照對象是瀏覽器的4條邊

【實例代碼】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS固定定位</title><style type="text/css"> *{margin: 0px; padding:0px;} #all{  width:500px;  height:600px;  background-color:#FC3; } #fixed{  width:100px;  height:100px;  border:15px outset #f00;  background-color:#9c9;  position:fixed;  top:30px;  left:10px; } #a{  width:200px;  height:300px;  margin-left:150px;  background-color:#F9F;  border:2px  outset #000; } </style> </head>

<body> <div id="all"> <div id="fixed">固定的容器</div> <div id="a">   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>&nbsp;</p>   <p>無定位的div容器</p> </div> </div> </body> </html>

 

【代碼分析】

這里給外部div設置了#FC3背景色,并給內部無定位的div設置了#F9F背景色,而固定定
位的div容器設置了#9c9背景色,并設置了outset類型的邊框,瀏覽效果如圖18.13所示?
以嘗試拖動瀏覽器的垂直滾動條,固定容器不會有任何位置改變,無定位的容器位置會改變,
如圖18.14所示。

固定定位

 【素材及源碼下載】

請點擊:固定定位(css fixed) 下載本實例相關素材及源碼

 


網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

亚洲嫩草影院久久精品