絕對定位
如果想為元素設定層模型中的絕對定位，需要設定position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗，而其層疊順序則通過z-index屬性來定義。
如下面**可以實現div元素相對於瀏覽器視窗向右移動100px，向下移動50px。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
效果如下：
相對定位
如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成乙個元素，相對於以前的位置，移動方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
如下**實現相對於以前位置向下移動20px，向右移動100px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
顯示效果：
固定定位
fixed：表示固定定位，與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響，這與background-attachment:fixed;屬性功能相同。以下**可以實現相對於瀏覽器檢視向右移動100px，向下移動50px。並且拖動滾動條時位置固定不變。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
wwwww
文字
文字文字
文字文字
文字文字
文字文字
文字文字
文字文字
文字文字
文字文字
文字文字
文字文字
文字文字
文字
實際效果需要滑動瀏覽器的滾動條才能看到，所以就不演示了。 讀者請拷貝以上**自行測試，注意：p標籤盡量要多些,才能顯示滾動條。
注意：ie瀏覽器對固定定位支援不理想。
css布局 定位
1 為什麼需要定位？某個元素可以自由的在乙個盒子內移動位置，並且壓住其他盒子 滾動視窗時，盒子固定在某個位置 2 應用 下拉列表 模態框 web應用程式的一些基本效果 3 本質 將元素徹底從文件流中移走。允許將元素放在螢幕的任意位 置，還可以將乙個元素放到另乙個元素的前面或者後面，彼此重疊。按照定位...
css 定位布局
文件流 文件流，是指盒子按照html標籤編寫的順序依次從上到下，從左到右排列。塊元素佔一行，行內元素在一行之內從左到在排列，先寫的先排列，後寫的排在後面，每個盒子都佔據自己的位置。關於定位 可以使用css的 position 屬性來設定元素的定位型別，position 設定項如下 1 relativ...
css 布局布局定位心得
1 區域性絕對定位。當我們在乙個預設定位方式的div內巢狀的div實用 絕對定位 absolute 的時候，它會脫離上乙個div的控制，要實現乙個巢狀div相對上乙個div的絕對定位，只需要給上乙個div的定位加上 相對定位 relative 屬性即可，一般不會影響父div的顯示效果。2 盡量使用 ...