CSS快速學習7：定位錨點
定位錨點：
一、position 定位屬性，檢索物件的定位方式；
語法：position：static /absolute/relative/fixed
取值：
1、static：預設值，無特殊定位，物件遵循HTML原則；
2、absolute：絕對定位，將物件從文件流中拖離出來，使用left/right/top/bottom等屬性相對其最接近的一個並有定位設定的父元素進行絕對定位；如果不存在這樣的父物件，則依據body物件(瀏覽器)，而其層疊通過z-index屬性定義；
3、relative ：相對定位，物件不可層疊，將依據right，top，left，bottom（相對定位）等屬性在正常文件流中偏移位置；
4、fixed：(固定定位)未支援，物件定位遵從絕對定位方式（absolute）；但是要遵守一些規範；
|
值 |
描述 |
|
static |
預設。位置設定為 static 的元素會正常顯示，它始終會處於文件流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 宣告）。 |
|
relative |
是相對於預設位置的偏移定位，通過設定left、top、right、bottom值可將其移至相對於其正常位置的地方 |
|
absolute |
相對於父級元素的絕對定位，浮出、脫離文件流，它不佔據空間，就是我們所說的層，其位置相對於最近的已定位父元素而言的位置，可直接指定 “left”、“top”、“right” 以及 “bottom” 屬性。若父級都沒有定位，則以html、body，瀏覽器的位置為相對位置。 |
|
fixed |
相對瀏覽器的絕對定位，可定位於相對於瀏覽器視窗的指定座標。此元素的位置可通過 "left"、"top"、"right" 以及"bottom" 屬性來規定。不論視窗滾動與否，元素都會留在那個位置。 |
二、絕對定位和相對定位的區別
1、參照物不同，絕對定位的參照物是包含塊（父級），相對定位的參照物是元素本身位置；
2、絕對定位將物件從文件流中拖離出來因此不佔據空間，相對定位不破壞正常的文件流順序無論是否進行移動，元素仍然佔據原來的空間。
三、包含塊的概念及作用
包含塊是絕對定位的基礎，包含塊就是為決定定位元素提供座標，偏移和顯示範圍的參照物，即確定絕對定位的偏移起點和百分比
預設狀態下，body是一個大的包含塊，所有絕對定位的元素都是根據視窗來定自己所處的位置和百分比大小的顯示的，如果我們定義了包含元素為包含元素塊以後，對於被包含的絕對定位元素來說，就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置。
四、定位元素層疊屬性：
z-index : auto |number
檢索或設定物件的層疊順序。
auto：預設值。遵從其父物件
number:無單位的整數值。可為負數
說明：
較大 number 值的物件會覆蓋在較小 number 值的物件之上。如兩個絕對定位物件的此屬性具有同樣的 number 值，那麼將依據它們在HTML文件中宣告的順序層疊。
此屬性僅僅作用於 position 屬性值為 relative 或 absolute 的物件。
巢狀關係中，父級容器預設在低一層，不用設定z-index；給子容器設定負值就可以讓父級在子容器上層顯示。
五、命名錨點連結的應用
定義：
是網頁製作中超級連結的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級連結，運用相當普遍。
命名錨點連結的應用：
1)命名錨點的作用：在同一頁面內的不同位置進行跳轉。
2)給元素定義命名錨記名
語法：<標記 id="命名錨記名"> </標記>
3)命名錨記連線
語法：<a href="#命名錨記名稱"></a>