關于使用Position屬性對網頁布局的探討

鄧思思

摘要： 隨著互聯網的日益繁華，不同類型的網站設計成為主流，極大影響了我們的事業和各行各業的發展。此外，互聯網也極大推動我國各知名企業、中小企業和事業單位的辦公流程。隨著越來越多人應用互聯網及互聯網的普及，互聯網網站設計布局必然成為重點內容。本文首先論述了Position屬性的基本定義和其對應的屬性值、然后演示Position屬性對網頁整體布局的應用。該方法與技巧將對使用Dreamweaver設計網頁布局的初學者有重要意義和借鑒價值。

關鍵詞： position屬性;網頁設計布局;Dreamweaver

中圖分類號： TP393.092?? ?文獻標識碼： A?? ?文章編號： 1672-9129（2018）09-0007-01

Abstract： ?with the growing prosperity of the Internet， different types of website design have become the mainstream， greatly affecting our career and the development of all walks of life. In addition， the Internet also greatly promotes the office processes of well-known enterprises， small and medium-sized enterprises and public institutions in China. As more and more people use the Internet and the popularity of the Internet， the design layout of the Internet website is bound to become the key content. This paper first discusses the basic definition of Position attribute and its corresponding value， and then demonstrates the application of Position attribute to the overall layout of web pages. This method and technique will be of great significance and value to beginners using Dreamweaver to design web layouts.

Keywords： position attribute;Page layout;Dreamweaver

2018年中，中國互聯網絡信息中心（CNNIC）發布第42次《中國互聯網絡發展狀況統計報告》，報告顯示，截至2018年6月，中國網民規模達8.02億，互聯網普及率達到57.7%。中國互聯網行業整體向規范化、價值化發展。

與此同時，截至2018年6月，我國網民規模達8.02億，互聯網普及率為57.7%;2018年上半年新增網民2968萬人，較2017年末增長3.8%;我國手機網民規模達7.88億，網民通過手機接入互聯網的比例高達98.3%。截至2017年初，我國網民普及率達到53.2%，超過全球平均水平3.1個百分點，超過亞洲平均水平7.6個百分點。全年共計新增網民4299萬人，增長率為6.2%，中國網民規模已經相當于歐洲人口總量。互聯網如此巨大的發展，人們的焦點也就集中在怎么去將做網站做好上，因此，我們現在來探討一下建設網站中最基礎的網頁布局。

1 HTML語言中Position屬性的基本定義

HTML超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。HTML語言中Position屬性是指本體相對與父級或上一級的定位。Position屬性所對應的屬性值主要有如下4中：static、relative、absolute和fixed。Static一般為默認值，意味著對象沒有被定位，出現在正常的文檔流中。relative意味對象被相對定位，出現在正常的文檔流中并沒有任何的效果顯示。absolute意味對象被絕對定位，不能出現在正常的文檔流中;一般搭配top、left、right和bottom等位置使用進行布局。fixed意味對象被固定，不能出現在正常的文檔流中;一般搭配top、left、right和bottom等位置使用進行固定。

2 Position屬性值在網頁布局中的應用

使用position屬性制作出網頁布局的縮小版。具體示例如下：

2.1大盒子（div）的設置。首先，在Dreamweaver部分設置id名稱為top的