在使用css創(chuàng)建類似title屬性提示框，常見的方法是使用絕對定位，用負值使其偏移于屏幕之外，在鼠標經(jīng)過時定義一個合適的正值使其顯示到我們所需要的位置。但是，有一個我們不常用的屬性我們常常將其擱置一旁而未加利用－－”auto”。《Auto Positioning for Absolute Elements 》這篇文章詳細介紹了該屬性的使用方法，本人曾翻譯了此文－－《絕對定位元素的自動定位》，但文章太長，不甚直觀，本文通過對比兩種創(chuàng)建提示框的方法來介紹該屬性的使用方法。
一、常規(guī)方法
看下面的html結果，我們讓.test相對定位，確定其內(nèi)部span標簽的定為基點，在鼠標經(jīng)過時，定義span標簽的left為0。
1.<div class="box">常見的實現(xiàn)消息提示框的方法，是讓父元素相對定位，消息內(nèi)容絕對定位。默認狀態(tài)讓其隱藏于屏幕之外，鼠標經(jīng)過時定義一個正值使其顯示在我們需要的位置。看看這個<a class="test" href="#">消息提示框<span>鼠標經(jīng)過時我會出現(xiàn)</span></a>。你可以看到，鼠標經(jīng)過時，消息框會出現(xiàn)在鼠標的位置。</div>

.test{
　　　position:relative;
　　　display:inline-block;//使其在IE8中正常顯示； color:#fff;
}
.test span{
　　　position:absolute;
　　　top:15px;
　　　left:-999em;
　　　border:1px soid #6c3;
　　　background-color:#F60;
}
.test:hover{
　　　background:#fff;/修復IE中的bug，這里是為了測試，如果不需要顏色，可以使用一張1×1px大小的透明圖片來代替。/
　　　color:#00f;
}
.test:hover span{
　　　left:0;
}

注意在鼠標經(jīng)過時，我們定義了背景顏色，這時為了修復 IE中特有的bug，關于bug這里不做太多描述，讀者可參考相關資料。常見的方法在IE6、IE7中工作良好，但在IE8中看起來很古怪，如果給.test定義一個display:inline-block屬性，它將顯示良好。IE6與IE7、IE8、FF、chrome顯示略有不同，IE6中span標簽里的內(nèi)容自動擴展，而在IE7、IE8、FF、chrome中，其寬度與文本“消息提示框”等寬，超過的換行顯示。
二、使用“自動定位”
使用“自動定位”，對于.test我們不需要使用定位屬性，對于其內(nèi)部標簽span，去掉top屬性，保留left屬性，在鼠標經(jīng)過時，讓span標簽的left屬性為auto。這看起來不可思議，但的確工作良好。span標簽絕對定位后，它保留了在文本流中的正常位置，它是它在一個新的層上。css如下：

.test-auto{
　　　color:#fff;
}
.test-auto span{
　　　position:absolute;
　　　left:-999em;
　　　border:1px soid #6c3;
　　　background-color:#F60;