盒子的定位
一、 定位 （position）
定位position 說明：
設置對象的定位方式，可以讓布局層容易位置絕對定位，控制盒子對象更加准確。
定位 position 語法：
position : static 、absolute 、relative、fixed 。
static : 稱為靜態定位，這是默認的屬性值，也就是該盒子按照標准流（包括浮動方式）進行布局。
relative ：稱為相對定位，使用相對的盒子的位置常以標准流動排版方式為基礎，然后使盒子相對於它在原來的位置偏移指定的距離。相對定位的盒子仍在標准流中，它后面的盒子仍以標准流的方式對待它。
absolute : 稱為絕對定位，盒子的位置以它的包括框為基准進行偏移。絕對定位的盒子從標准流中脫離。這意味着它們對其后的兄弟盒子的定位沒有影響，其他的盒子就好象這個盒子不存在一樣。
fixed : 稱為固定定位，它和絕對定位類似，只是以瀏覽器窗口為基准進行定位，也就是當拖動瀏覽器窗口的移動滾動條時，依然保持對象的位置不變。
position 指定的偏移量，水平方向通過left或者right屬性來指定；豎直方向通過top和bottom來指定。left，right，top，bottom這4個屬性只有當position屬性設置為absolute、relative和fixed時才有效。
下面提供一些基礎代碼：
<!DOCTYPE html> <html > <head> <title>position屬性</title> <style type="text/css"> body{ margin:20px; font :Arial 12px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; } #son{ background-color:#D2B48C; border:1px dashed #000000; padding:10px; } </style> </head> <body> <div id="father"> <div id="son">Box盒子</div> </div> </body> </html>
效果圖：
1、static (靜態定位)
在css的position中，設置static為默認值，它表示塊保持在原本應該在的位置上，即該值沒有任何的移動效果，這里就詳細說了。
2、relative (相對定位)
使用相對定位的盒子的位置常以標准流的排版方式為基礎，然后使盒子相對於它在原本的標准位置偏移指定的距離。相對定位的盒子仍在標准流中，它后面的盒子仍以標准流方式對待它。position指定的偏移量可以使用left，right，top，bottom等屬性進行設置。
（1）除了將position屬性設置為relative屬性，再設置一些偏移量距離即使用right屬性和bottom屬性，如下：
#son{ background-color:#D2B48C; border:1px dashed #000000; padding:10px; position:relative; right:28px; bottom:28px; }
效果圖：
上圖可以看出Box盒子和原來的位置相比，它向左和向上分別移動了28像素，也就是說，“right:28px”的作用就是使Box盒子的新位置在它原來位置的右邊框左側28像素的地方，“bottom:28px”的作用就是使Box盒子的新位置在原來位置的下邊框上側28像素的地方。這里用到了right和bottom這兩個CSS屬性，實際上在CSS中一共有4個配合position屬性使用的定位屬性，除right 和 bottom 之外，還有top和left。
當子塊使用相對定位以后，它發生了偏移，即使移動到了父盒子的外面，父盒子也不會變大，就好像子盒子沒有變化一樣。
(2)兩個子塊的情況
下面討論的是兩個子塊的情況。把上面的基礎代碼改為如下代碼，在父div中放兩個子div。首先對它們都不設置任何偏移。
<!DOCTYPE html> <html> <head> <title>兩個子塊相對定位的情況</title> <style type="text/css"> body{ margin:20px; font :Arial 12px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; } #father div{ background-color:#B2D4BC; border:1px dashed #000000; padding:10px; } #son1{ } #son2{ } </style> </head> <body> <div id="father"> <div id="son1">Box盒子1</div> <div id="son2">Box盒子2</div> </div> </body> </html>
效果圖：
上圖可以看到那兩個子塊的設置還都空着。下面首先將Box盒子1的CSS設置為：
#son1{ #son position:relative; bottom:28px; right:28px; }
再看效果圖：
與前一個效果圖相比可以看到子塊“Box盒子1”的位置以自身為基准向上和向左各偏移了28像素，而Box盒子2沒有任何變化。上面的實驗是針對標准流方式進行的，實際上，對浮動的盒子使用相對定位也是一樣的，都會相對於原有的位置進行指定的偏移並到達新的位置，而這一偏移並不會對其后面的兄弟元素帶來任何的影響。
***“相對定位” 的原則：
（1）、使用相對定位的盒子，會相對於它原本的位置，通過偏移指定的距離，到達新的位置。
（2）、使用相對定位的盒子仍在標准流中，它對父塊和兄弟盒子沒有任何影響。
***相對定位，就是以盒子本身在標准流中或者浮動時原本的位置作為偏移基准的。
3、absolute (絕對定位)
通過上面介紹的例子可以了解到 position 屬性需要通過配合偏移一定的距離來實現定位，而其中核心的問題就是以什么作為偏移的基准。絕對定位，盒子的位置以它的包含框為基准進行偏移（如果對象的父級沒有設置定位屬性，即還是遵循 HTML 定位規則的，則依據 body 對象左上角作為參考進行定位）。
下面提供一些基礎代碼：
<!DOCTYPE html> <html> <head> <title>三個子塊絕對定位的情況</title> <style type="text/css"> body{ margin:20px; font :Arial 12px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; } #father div{ background-color:#D2B48C; border:1px dashed #000000; padding:10px; } #son2{ } </style> </head> <body> <div id="father"> <div>Box盒子1</div> <div id="son2">Box盒子2</div> <div>Box盒子2</div> </div> </body> </html>
效果圖：
（1）嘗試使用絕對定位,對#son2的CSS設置位置，目前它還是空白的，下面將它改為：
#son2{ position: absolute; top: 28px; right: 28px; }
效果圖：
上圖是以瀏覽器窗口為基准，從右上角開始向下和向左各移動28像素。 這時候是否產生了一個這樣的疑問“是不是所有的絕對定位都以瀏覽器為基准來定位呢？”答案是否定的，接下來對上面的代碼做一處修改，為父div增加一個定位樣式，代碼如下：
#father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; position: relative; }
效果圖：
上圖所示效果發生了變化，偏移的距離沒有變化，但是偏移的基准不再是瀏覽器窗口，而是它的父div了。
絕對定位的原則：
（1）、使用絕對定位的盒子以它的“最近” 的一個“已經定位”的“祖先元素”為基准進行偏移，如果沒有已經定位的祖先元素那么會以瀏覽器為基准進行定位。
（2）、絕對定位的框從標准流中脫離，這意味着它們對其后的兄弟盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣。
4、fixed （固定定位）
fixed定位與absolute定位有些類似，區別在於定位的基准不是祖先元素，而是瀏覽器窗口或者其他顯示設備的窗口。當訪問者拖動瀏覽器窗口的滾動條時，固定定位的元素將保持相對瀏覽器窗口不變的位置。這里就不詳細介紹了。
5. z-index (空間位置)
z-index屬性用於調整定位時重疊的上下位置，頁面為x-y軸，垂直於頁面的方向為z軸，z-index值大的頁面位於其值小的上方。
z-index屬性的值為整數，可以是正數也可以是負數。當塊被設置了position屬性時，該值便可以設置各塊之間的重疊高低關系。默認的z-index值為0，當兩個塊的z-index值一樣時，將保持原有的高低覆蓋關系。
盒子的定位 介紹就到此結束了，謝謝你的欣賞！