從佈局的角度來說，html元素可以分爲兩類：行級元素和塊級元素。
行級元素，就是不會單獨佔一行的元素，在一行內可以有多個行級元素，但是塊級元素單獨佔一行。行級元素的寬度和高度不能設定，只能由其內部的內容確定；塊級元素默認寬度是其容器層的100%，當然其高度和寬度是可以自己設置的。
典型的塊級元素如div、p、h1等等。行級元素如a、span等等。
需要說明的是，塊級元素和行級元素之間是可以相互轉行的:通過display屬性進行修改。
對於一個塊級元素，通過:display:inline;即可將其轉換爲行級元素。
對於一個行級元素，通過:display:block;即可將其轉換爲塊級元素。
一般情況下，將行級元素和普通文本圖片視爲內容，而塊級元素和內容之間的關係是這樣的：塊級元素之中放置內容，就是說塊級元素用來構建一個容器，用來盛放內容。
因此，我們在研究佈局定位的時候只需要關注塊級元素即可。
對於一個塊級元素，爲了方便這裏不妨稱之爲:層。
從以下幾個方面來描述層的佈局特性：
第一：層的盒狀模型
這點需要重點理解:margin.border,padding,element的含義及其複雜的內部關係。第二：html文檔流
一般地，html文檔流佈局的機制是這樣的：從html文檔<body>開始解析元素直至</body>結束。1.遇到行級元素，就將其放在一行靠左的位置，如果這一行寬度不夠，另起一行，繼續從左往右排布。
2.遇到塊級元素，就另起一行，在新行中放置塊級元素。
整個文檔流是從左向右，從上向下來進行佈局的。
通過這種方式能完成大多數的頁面佈局需求，但是針對特殊的版面，需要其他的技術支持，於是就有了下面手段。
層默認的顯示方式是遵循文檔流佈局的，可以設置將其從文檔流中拉出來，獨立顯示。
(1)相對定位,設置層的position屬性爲relative
一旦設置一個層爲相對定位層之後就能使這個層相對於其原來的位置(遵循文檔流佈局的位置)移動了。需要說明的是，儘管這個層不在原來的位置上了，但是其原來的位置仍然是它的預留地，就是說那個位置仍然爲其保留着，其他層不能佔用。只是這個層在此基礎之上偏移了(偏移量由top,left,right,bottom指定)。還有一點，由於這個層偏移了，那就不可避免的會和其他層重疊，這就牽扯到顯示覆蓋的問題。實際上這個問題是這樣處理的：比較重疊層的z-index值，值大地優先顯示(注，普通層不能設置其z-index值，其值恆爲0)。演示代碼：
#d2{
background-color:green;
width:100px;
height:100px;
position:relative;/*聲明這是一個偏移層*/
top:10px;/*指定偏移量*/
left:10px;/*指定偏移量*/
z-index:1;/*指定縱向顯示的優先級*/
}
(2)絕對定位，將層的position屬性設置爲absolute
絕對定位層將會被從文檔佈局流中刪除，也就是說在文檔流佈局的時候不會考慮絕對定位層，它的位置依賴其設置的偏移量。前面提到，相對定位層偏移的基準是其原來的位置，但是絕對定位層呢？是這樣的：其基準是距其最近的設置了piosition屬性的父層，如果沒有就是body窗體。其重疊覆蓋問題的處理和相對定位層一樣：比較z-index值。#mydiv{
background-color:green;
width:100px;
height:100px;
position:absolute;
top:100px;
left:10px;
z-index:3;
}
(3)絕對定位，將層的position屬性設置爲fixed.
這個絕對定位層和前面講到的絕對定位層的區別就是：這個絕對定位層的偏移基準始終是body窗體。其他相似。#mydiv{
background-color:yellow;
width:100px;
height:100px;
position:fixed;
top:50px;
left:50px;
z-index:4;
}
(4)浮動層，設置層的float屬性(取值left,right)
浮動層也會從文檔流中被刪除，就是說其他普通層將會忽略浮動層的存在。浮動層的浮動規則是這樣的：浮動層在其父層的範圍內向指定的方向浮動，如果水平空間不夠的話就向下擺放。由於普通層會忽略浮動層，因此默認普通層會被浮動層覆蓋。解決這一問題的方法是在浮動層後面的層添加這樣的屬性設置
clear:both.
這樣，這個普通層就會在浮動層的下方顯示，而不會被覆蓋。
以上內容揭示了頁面排版佈局的核心祕密。