CSS設定DIV的定位絕對定位和相對定位

設定DIV或者其他元素在瀏覽器中顯示的位置是HTML佈局中重要的一個內用，我們透過合理的佈局使得我們的網站美觀大方，這裏我就來說說如何使用CSS來給div定位。

操作方法

（01）首先我不給div定位來看看兩個div在瀏覽器中是如何顯示的，具體的代碼如下：<html><head><title>CSSdiv定位</title><style type="text/css">1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;}2{height:100px;width:100px;border-style:solid;border-color:blue;border-width:10px;background-color:yellow;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>如下圖，可以看到兩個div在沒使用定位的情況下顯示的位置，我們可以發現div是個塊，自動換行了。

（02）相對定位：首先給div2使用相對定位，用position:relative;來實現的，具體的代碼如下：<html><head><title>CSSdiv定位</title><style type="text/css">1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;}2{height:100px;width:100px;border-style:solid;border-color:blue;border-width:10px;background-color:yellow;position:relative;top:40px;left:40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>可以看到如下圖，div2的位置離div1的位置偏移了上邊四十個像素，左邊四十個像素。

（03）絕對定位：現在來看看絕對定位，使得div1和div2能重疊，具體的代碼如下：<html><head><title>CSSdiv定位</title><style type="text/css">1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;}2{height:100px;width:100px;border-style:solid;border-color:blue;border-width:10px;background-color:yellow;position:absolute;top:40px;left:40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>如下圖是不是發現兩個div塊重疊了，具體的效果如下圖。

（04）絕對定位：現在我來使得div1的絕對定位邊60px，左邊60px，看看執行的效果是什麼樣子呢？具體的代碼如下：<html><head><title>CSSdiv定位</title><style type="text/css">1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;position:absolute;top:60px;left:60px;}2{height:100px;width:100px;border-style:solid;border-color:blue;border-width:10px;background-color:yellow;position:absolute;top:40px;left:40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>可以看到如下圖的執行效果，是不是得出了絕對定位的定位點是瀏覽器左上角座標點爲(0,0)這個像素點爲起點的。

（05）div塊加文字P:這裏爲了說明下個定位相關的知識，我先做如下的模型，具體的代碼如下：<html><head><title>CSSdiv定位</title><style type="text/css">1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;}</style></head><body><div class="div1"><p>我是div塊中的文字。</p></div></body></html>如下圖可以看到文字在div塊中，那麼我們該如何使得div中文字總是在div塊中呢,這裏說的是使用絕對定位的情況下。

（06）div和文字：將div塊設定成絕對定位，看看文字顯示的位置，具體的代碼如下：<html><head><title>CSSdiv定位</title><style type="text/css">1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;position:absolute;top:60px;left:60px;}</style></head><body><div class="div1"></div><p>我是div塊中的文字。</p></body></html>如下圖，是不是發現文字沒有在div塊中了。

（07）div絕對定位下塊中的文字：這裏我要實現div在絕對定定位下，div以及能在塊中，具體的代碼如下：<html><head><title>CSSdiv定位</title><style type="text/css">1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;position:relative;}p{position:absolute;top:10px;left:10px;}</style></head><body><div class="div1"></div><p>我是div塊中的文字。</p></body></html>上面相對，下面絕對，具體的顯示效果如下圖。