2.css代碼.relative { position:relative;height:120px; border:2px solid red; }
.absolute { position:absolute; top:10px; left:10px;
padding:5px; text-align:center;
border:5px solid green; background-color:gold; }
3.啟動並執行結果
4.改進css
去掉span父元素的定位。css代碼如下，.relative { height:120px; border:2px solid red; }
.absolute { position:absolute; top:10px; left:10px;
padding:5px; text-align:center;
border:5px solid green; background-color:gold; }
5.修改後運行結果
二、對結果的分析
絕對位置的元素的位置相對於最近的已定位的祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊，根據使用者定義的不同，最初的包含快可能是body或者html元素；絕對位置的元素會從文檔流中分離，不再佔據空間； position:absolute完成絕對位置需要top和left屬性的共同作用。
所以，當我們想使用絕對位置的核心思想是，讓一個元素脫離正常文檔流的排列，讓它相對於另一個元素重新排列。
說明：其中使用相對定位是為了給絕對位置元素一個已定位的祖先元素，並不是為了說明相對定位。
三、執行個體應用
我們經常會遇到系統字型不全的問題，在自己電腦上web頁面啟動並執行很好，但是上傳以後，才發現樣式變了……當然我們可以把字型一塊上傳，但是這並不是我想介紹的。這裡介紹另外一種方法是使用圖片替換文本，這樣圖片會儲存文字的樣式資訊，不會影響效果。如果圖片下載失敗，被覆蓋的文字會正常顯示。圖片替換文本主要就是運用了絕對位置。此方法也被用到SEO最佳化上面，也是一個比較經典的案例，可以查閱相關資料，這裡不再贅述。
說明：其中使用相對定位是為了給絕對位置元素一個已定位的祖先元素，並不是為了說明相對定位。
1.xhtml代碼<h1>文字替換</h1>
<h2 id="h2" >這是華文行楷<span></span></h2>
2.css代碼#h2 { position:relative; width:206px; height:52px; overflow:hidden; }
#h2 span { position:absolute; width:206px; height:52px; left:0; top:0;
background:url("font.jpg") no-repeat; }
3.運行效果
註：本文轉自：http://www.cnblogs.com/tjdxlmy/archive/2009/07/31/1536189.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
