精確模式下的位置基礎

Windows Internet Explorer 中顯示文件的部份稱為 「內容區域」 。內容區域是從 x 與 y 座標設為 0 的左上角開始,沒有固有的邊界或邊框距離。HTML 元素是文件中的第一個容器,且相對於內容區域 (通常是瀏覽器視窗)。

任何元素與其定位父元素之間的距離會定義元素位置。當文件呈現時,或當內容的變更強制重新繪製文件時,Internet Explorer 會公開元素位置。瞭解元素在文件內的位置,對判斷及變更元素位置非常重要。

元素的一般版面配置主要是根據文件流程而定。在從左至右的語言中,流程一般是指從左至右、從上至下的內容版面配置。除非另有指定,否則沒有絕對或固定位置的內嵌和區塊元素依預設會以此方式流動。具有絕對或固定位置的元素會在文件流程之外呈現。文件流程是計算元素的度量單位之後的元素順序。變更定位元素的度量單位或位置不會影響文件流程中相鄰的元素,但可能會影響子元素。

未定位的內嵌和區塊元素會一起呈現,且為文件流程的一部分。當先前在文件流程中顯示之其他元素的度量單位變更時,元素的位置也可能變更。當其他元素的內容、版面配置或字型樣式在文件呈現後更新時,元素的度量單位會變更。變更未定位元素的度量單位時,會改變文件流程中相鄰元素的位置。

上方及左側位置

下列範例說明如何擷取內嵌元素的位置,以及其他元素的度量單位如何影響該內嵌元素的位置:

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 Strict//EN">
<script>
function getLocation(){
   alert("Left: " + ospan.offsetLeft);
   ospan1.innerHTML="Changed content.";
   alert("Left: " + ospan.offsetLeft);
   ospan1.innerHTML="This is some dynamic content.";
}
</script>
</body>
<span id="ospan1">This is some dynamic content.</span>
<span style="background-color: #CFCFCF;" id="ospan">
This content won't change, but the location of this element will change.
</span>
<input type="button" value ="Locate Second Element" onclick="getLocation()">
</body>

巢狀元素

若要判斷任何巢狀元素與其父元素之間的距離,可能需要納入父元素的位置。例如,TD 元素的上方及左側位置會傳回儲存格與父元素 (就是 TABLE 元素) 之間的距離。若要判斷巢狀元素與 BODY 元素之間的距離,必須評估文件階層,並新增兩個元素之間所有父物件的左側位置值。

另請參閱

概念

屬性 (依名稱)
階層式樣式表參照
快速模式中的度量單位和位置屬性