網頁制作poluoluo文章簡介：在使用css創建類似title屬性提示框，常見的方法是使用絕對定位，用負值使其偏移於屏幕之外，在鼠標經過時定義一個合適的正值使其顯示到我們所需要的位置。但是，有一個我們不常用的屬性我們常常將其擱置一旁而未加利用－－auto.
在使用css創建類似title屬性提示框，常見的方法是使用絕對定位，用負值使其偏移於屏幕之外，在鼠標經過時定義一個合適的正值使其顯示到我們所需要的位置。但是，有一個我們不常用的屬性我們常常將其擱置一旁而未加利用－－”auto”。《Auto Positioning for Absolute Elements 》這篇文章詳細介紹了該屬性的使用方法，本人曾翻譯了此文－－《絕對定位元素的自動定位》，但文章太長，不甚直觀，本文通過對比兩種創建提示框的方法來介紹該屬性的使用方法。
一、常規方法
看下面的html結果，我們讓.test相對定位，確定其內部span標簽的定為基點，在鼠標經過時，定義span標簽的left為0。
1.<div class="box">常見的實現消息提示框的方法，是讓父元素相對定位，消息內容絕對定位。默認狀態讓其隱藏於屏幕之外，鼠標經過時定義一個正值使其顯示在我們需要的位置。看看這個<a class="test" href="#">消息提示框<span>鼠標經過時我會出現</span></a>。你可以看到，鼠標經過時，消息框會出現在鼠標的位置。</div> 01..test{ 02. position:relative; 03. display:inline-block;//使其在IE8中正常顯示； color:#fff; 04.} 05..test span{ 06. position:absolute; 07. top:15px; 08. left:-999em; 09. border:1px soid #6c3; 10. background-color:#F60; 11.} 12..test:hover{ 13. background:#fff;/修復IE中的bug，這裡是為了測試，如果不需要顏色，可以使用一張1×1px大小的透明圖片來代替。/ 14. color:#00f; 15.} 16..test:hover span{ 17. left:0; 18.}注意在鼠標經過時，我們定義了背景顏色，這時為了修復 IE中特有的bug，關於bug這裡不做太多描述，讀者可參考相關資料。常見的方法在IE6、IE7中工作良好，但在IE8中看起來很古怪，如果給.test定義一個display:inline-block屬性，它將顯示良好。IE6與IE7、IE8、FF、chrome顯示略有不同，IE6中span標簽裡的內容自動擴展，而在IE7、IE8、FF、chrome中，其寬度與文本“消息提示框”等寬，超過的換行顯示。
二、使用“自動定位”
使用“自動定位”，對於.test我們不需要使用定位屬性，對於其內部標簽span，去掉top屬性，保留left屬性，在鼠標經過時，讓span標簽的left屬性為auto。這看起來不可思議，但的確工作良好。span標簽絕對定位後，它保留了在文本流中的正常位置，它是它在一個新的層上。css如下：
01..test-auto{ 02. color:#fff; 03.} 04..test-auto span{ 05. position:absolute; 06. left:-999em; 07. border:1px soid #6c3; 08. background-color:#F60; 09. text-decoration:none; 10.} 11..test-auto:hover{ 12. background:#fff; 13. color:#00f; 14.} 15..test-auto:hover span{ 16. left:auto; 17.}現在，使用自動定位可以實現彈出消息提示框。但是，除了上面提及的那個bug外，還有幾個bug需要注意。
span標簽定義display:block時，在FF和IE下顯示有差別。
當我們給.test-auto span增加display:block時。你可以看到，鼠標經過時，在FF中消息框另起一行（這是使用該屬性正常的效果）。但在IE6、IE7中查看，我們看到它仍在原來的位置之上。
span標簽定義font-style:italic;時，在IE7中出現滾動條。
可以看到，鼠標經過時，在FF和IE6中消息框出現，沒有任何異常。但在IE7中查看，我們看到水平滾動條出現了。這似乎就是IE中的italics bug。對於該bug，給其定義overflow:hidden，鼠標經過時，滾動條將會消失。
另外，在 chrome中查看，鼠標經過時，消息框並沒有出現在鼠標經過的位置，而是出緊靠父元素的左側，真奇怪！！
三、“自動定位”的應用
自動定位有哪些用途呢？但我們在頁面的相關文本插入絕對定位圖像時，我們可以使其top和bottom屬性為“auto”，然後定義left或者right屬性值，那麼其垂直位置就由文本流來控制，水平位置有left或者right的長度值來決定。
四、總結
“自動定位”使我們不常用的一個屬性，相信看完本文你對自動定位有一個很深的理解。本篇文章簡要的介紹了“自動定位”的應用，如果你想進一步定位提示框出現的位置，請參考我翻譯的另外另外一篇文章－－《邊距和絕對定位》，希望能對你有所啟發。