基于HTML+CSS網頁布局定位參數研究

梁艷玲

(山西旅游職業學院 計算機科學系，山西 太原 030031)

1 定位的概念

網頁設計中，網頁布局非常重要.網頁布局常常使用的方法是盒子模型、浮動和定位.常規的頁面元素在排列時會按照從上到下或者從左到右的順序一一羅列，這種默認下的排列方式稱之為文檔流.但一般默認方式呈現網頁設計相對單調，混亂.盒子模型是使用CSS控制頁面元素外觀和位置的基礎.浮動是當元素脫離文檔流后對元素進行布局調整，常常做左右布局.而遇到上下布局和疊加等情況時便可以使用定位來完成網頁設計.

在正常的設計中，使用定位有很多種情況，且往往出現因參數不準確導致的布局混亂.現將定位的每個參數和屬性進行驗證研究.以準確把握定位的作用和使用.

2 定位的特點

網頁布局實際上就是對網頁對象的定位，定位方式不同，網頁元素的實現與控制方法也不同.在Css中 position屬性用于指定一個元素在文檔中定位的方式.取值有static默認(沒有任何定位，又稱靜態定位)；relative相對定位；absolute絕對定位；fixed固定定位；sticky，粘性定位.在設定了元素定位狀態后，再根據具體位置設置屬性值top、right、bottom、left的具體值來最終決定選中元素在網頁排版中最終的布局位置.

3 實例驗證定位屬性值的特性

(1)驗證relative相對定位[1]

案例1：設計三個尺寸為高度100px，寬度100px的網頁區域 box1、box2、box3，顏色設定為紅區、黃區、藍區，對其進行頁面布局，要求將黃色向右移動100px，再向下移動100px，即移動到藍色右側，頁面其他元素布局不變.如圖1

-------------------------------------

操作1：不使用定位屬性值，利用盒模型完成布局要求.

第1步：#box2{width:100px;height：100px;background：yellow;margin-left：100px;}(如圖2)

第2步：#box2{width:100px;height：100px;background：yellow; margin-left：100px;margin-top:100px;}(如圖3)

運行后查看結果發現box2黃色區域下移后box3藍色區域也被帶下來了，并未實現題目要求，這就是邊距帶來的問題，當然浮動也無法實現.既然是邊距的問題，因此可以設置box2黃色區域margin-top:-100px，box3藍色區域便可以保持原先的布局.

第3步：#box3{width:100px;height：100px;background：blue;margin-top:-100px;}

如果按照這樣的操作來實現上下布局，是很麻煩的，下面利用定位來實現位移的上下布局：

操作2：利用相對定位relative，增加偏移量.

第1步：#box2{width:100px;height：100px;background：yellow;position：relative;}

第2步：#box2{width:100px;height:100px;background:yellow;position:relative; left:100px;top:100px;} (如圖4)這里注意：left:100px;與right:-100px是等價關系.

觀察發現設置相對定位后，元素占文檔流，紅色box1和藍色box3沒有發生位移，box3沒有占據空出來的區域，不影響其他元素布局，box2相對于自身進行偏移.即自身左上角(0 0)進行偏移.

總結relative特點：①如果沒有定位偏移量，對元素本身沒有任何影響；②不脫離文檔流，不影響其他元素.

(2)驗證absolute絕對定位[2]

案例二：建立兩個一大一小區域box1(紅)和box2(黃)，設定絕對定位.如圖5所示.

#box1{width:100px;height：100px;background：red;}

#box2{width:200px;height:200px;background：yellow;}

-----------------

操作1：#box1{width:100px;height：100px;background：red;position：absolute;}

為box1添加絕對定位屬性，運行后發現塊元素box1添加絕對定位屬性脫離文檔流，box2“下沉”頂在頁面左上角.(如圖6).

案例三：創建內聯元素，為其添加寬、高、背景色樣式.如圖7所示.

span{width:100px;height：100px;background：yellow;}

-----------------

操作1：span{width:100px;height：100px;background：yellow;position：absolute;}(如圖8)

為內聯元素span添加絕對定位屬性，運行后如圖8顯示，原本不支持寬高的陰影區域，現在呈現出樣式里設置的寬高參數設置，具備了塊標簽的特性.

案例四：創建塊元素，不設置寬、高屬性.運行如圖9顯示塊元素的背景會默認與父元素同寬.

div{background:red;}

--------------

操作1：div{background:red;position：absolute;}

為塊元素div添加絕對定位屬性，運行結果看到div寬度由內容決定.如圖10所示.與塊元素默認屬性有了區別.即塊元素默認寬根據內容決定，使塊具有內聯元素的特性.

案例五：創建一個塊標簽，設置定位后，屬性值用絕對定位，并添加偏移量左移100px，頂部距離100px，運行結果如圖11所示，運行后，塊標簽參照瀏覽器發生偏移.代碼如下.

div{background:red;position：absolute;left :100px;top：100px;}

--------------

操作1：將案例五修改為嵌套結構，box1嵌套box2，并為父容器box1設置寬、高、邊框以及外邊距.為子元素box2只設置寬、高以及背景顏色，用來區分父容器的區域和子元素本身.運行結果如圖12所示.運行后看到box2方塊會在父容器box1的左上角.

#box1{width：300px;height：300px ;border:1px solid black;margin：200px;}

#box2{width：100px;height：100px; background:red;}

-----------------

第1步：#box2{width：100px;height：100px; background:red;position：absolute;left：0;top:0;}

為box2添加絕對定位，并設置偏移量.運行后發現，紅色方塊移動到了瀏覽器的左上角，即HTML的左上角，相當于文檔左上角.注意：0：0點以整個文檔左上角起點作為參照.運行結果如圖13所示.

第2步：box2{width：100px;height：100px; background:red;position：absolute;right: 0;top:0;}

第3步：#box2{width：100px;height：100px; background:red;position：absolute;right：0;bottom:0;}

分別對box2設置定位位置，經過驗證，在組合的代碼書寫下，可以把紅色方塊依次渲染到左上角、右上角、右下角這幾個位置，它的偏移跟自身沒有關系，是針對整個文檔偏移.如圖14，圖15所示.

第4步：為父元素box1添加相對定位，子元素box2保持定位屬性和偏移量.

#box1{width：300px;height：300px ;border:1px solid black;margin：200px;position：relative;}

#box2{width：100px;height：100px; background:red;position：absolute;right：0;bottom:0;}

運行后發現：box2紅色方塊子元素的偏移為圍繞父先元素偏移.位移坐標的 0、0點在父元素右下角.如圖16所示.

第5步：修改子元素box2的偏移坐標.

#box1{width：300px;height：300px ;border:1px solid black;margin：200px;position：relative;}

#box2{width：100px;height：100px; background:red;position：absolute;left：0;top:0;}

運行結果如圖17所示.偏移依然參照父元素進行，與整個文檔無關.

在案例驗證過程中父元素添加的relative相對定位，經過案例五驗證：父元素添加相對定位、絕對定位、固定定位三種定位其中一種，子元素偏移都是按父(祖先)元素進行偏移，跟整文檔無關.但如果子元素的所屬父(祖先)元素都沒有定位信息，那么子元素就會以整個文檔坐標進行偏移.

經過論證：相對定位relative是相對于當前元素自身的定位，對自身進行偏移，而絕對定位absolute跟自身沒有關系，它是針對父(祖先)元素或者整個文檔進行偏移.

總結absolute特點：①使元素完全脫離文檔流，使內聯元素支持寬高(讓內聯具備塊特性)，②使塊元素默認寬根據內容決定(讓塊具有內聯的特性)，③如果祖先元素定位，子元素相對于定位祖先元素發生偏移，④如果祖先元素未定位，子元素相對于整個文檔發生偏移.

(3)驗證fixed固定定位

案例六：創建案例：div加一個定位，給body加一個高度，讓瀏覽器出現一個滾動條，方便確認div定位布局.運行結果如圖18所示.

body{height：2000px;}

div {position:fixed;}

--------------

操作1：div {position:fixed;bottom:0;right：0;}

為div設置定位布局為文檔右下角底部，如圖19所示.運行后顯示div添加定位屬性后，移動滾動條內容“返回頂部”位移未發生改變.它被固定在容器設定的位置.用它可以制作很多“返回頂部”或者左右廣告、彈窗等布局.

按照驗證相對定位和絕對定位的方法，驗證固定定位只針對瀏覽器文檔進行偏移，在嵌套結構中也不會受祖先元素影響.

總結fixed特點：①使元素完全脫離文檔流，②使內聯元素支持寬高(讓內聯具備塊的特性)，③使塊元素默認寬根據內容決定(讓塊元素具備內聯的特性)，④相對于整個瀏覽器窗口進行偏移，不受瀏覽器滾動條的影響.

(4)驗證Sticky粘性定位.

案例七：創建一個多段文件，在其中一處添加一個div標簽，并為div添加一個背景，再為body設置高度參數，使屏幕出現滾動條，運行后如圖20所示，陰影部分為div標簽內容所在位置.代碼如下：

body{height:2000px ;}

div{background：red;}

---------------------

aaaaaaaa

……(多行)

bbbbbbbb

……(多行)

操作1：div{background：red;position：sticky;}

為元素div添加粘性定位屬性，未賦值，運行結果正常，陰影區域隨滾動條正常顯現.

操作2： div{background：red;position：sticky;top：50px;}

top:50px;就是等div達到50px高度是粘于此處.運行后如圖21顯示.

總結sticky特點：指定位置進行粘性操作.

(5)驗證Z-index定位層級

案例八：創建兩個盒模型：box1和box2，分別設置寬、高及背景顏色，并添加定位屬性和偏移位移量，運行后如圖22所示，由于后寫box2樣式優先級高,所以紅色box2在上方.創建時默認層級值為0，驗證：嵌套的時候的層級問題.

#box1{width：100px;height：100px ;background:yellow;position：absolute;}

#box2{width：100px;height：100px; background:red;position:absolute;left：50;top:50;}

---------------

操作1：為box1添加定位層級，默認是0值，(注意：值越高級別越高，值也可是負值.)為box2添加級別為-1，運行后box1調整為box2上方.如圖23所示.代碼如下：

#box1{width：100px;height：100px ;background：red;position：absolute;z-index:0;}

#box2{width：100px;height：100px; background:blue;position:absolute;left：50;top:50;z-index:-1;}

案例九：驗證嵌套的結構下定位層級問題.

創建父元素parten，以及子元素box1，與父元素同級元素box2，為它們添加樣式如下：

#parent{width：100px;height：100px;border：5px black solid;}

#box1{width：100px;height：100px ;background:yellow;position：absolute;z-index:0;}

#box2{width：100px;height：100px; background:red;position:absolute;left：50px;top:50px;z-index:-1;}

--------------------------

運行后結果如圖24顯示，box1層級高于box2，因此顯示在box2上方.

操作1：parent{width：100px;height：100px;border：5px black solid;position：absolute;z-index：-2;}

將父元素層級調低為-2，運行結果如圖25，box1受父元素層級定位影響層級未能體現層級， box2與parent同一級別進行比較，box1為子元素層級再高也無意義.如果parent不寫層級數值，box1與box2直接按層級賦值顯示.即嵌套元素分別加定位屬性時，若父容器的定位級別低，子元素的層級高，按父元素級別體現.

總結z-index特點：數值調整嵌套層級.

4 定位在頁面中應用實例[3]

網頁設計中常采用圖片截圖的方式美化列表標簽樣式，這種方法相對麻煩，本案例采用添加偽類，利用定位布局，智能簡潔的為列表添加方塊彩色列表標簽.

內容代碼及實例演示圖樣式部分結構部分

項目標簽美化

• 測試文字
• 測試文字
• 測試文字