position 定位屬性,檢索對象的定位方式
一、語法:position:static /absolute/relative/fixed
取值:1、static:默認值,無特殊定位,對象遵循HTML原則;
2、absolute:絕對定位,將對象從文檔流中拖離出來,使用left/right/top/bottom等屬性相對其最接近的一個並有定位設置的父元素進行絕對定位;如果不存在這樣的父對象,則依據html(根元素),而其層疊通過z-index屬性定義;
3、relative :相對定位,對象不可層疊,將依據right,top,left,bottom(相對定位)
等屬性在正常文檔流中偏移位置(相對自己原來的位置偏移)
4、fixed:固定定位,對象定位遵從絕對定位方式(absolute);但是要遵守一些規范(IE6瀏覽器不支持此定位)根據瀏覽器的窗口來定義自己的位置。
二、包含塊的概念及作用
包含塊是絕對定位的基礎,包含塊就是為決定定位元素提供坐標,偏移和顯示范圍的參照物,即確定絕對定位的偏移起點和百分比 長度的參考;默認狀態下,html是一個大的包含塊,所有絕對定位的元素都是根據根元素來定自己所處的位置和百分比大小的顯示的,如果我們定義了包含元素為包含塊以后,對於被包含的絕對定位元素來說,就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置。
定義元素為包含塊:給絕對定位元素的父元素添加聲明position:relative;
如果我們的父素設置了position:absolute;那么子元素也會相對父元素來定義自己的位置。
三、絕對定位和相對定位的區別
1、參照物不同絕對定位的參照物是包含塊,相對定位的參照物是元素本身位置;2、絕對定位將對象從文檔流中拖離出來因此不占據空間,相對定位不破壞正常的文檔流順序無論是否進行移動,元素仍然占據原來的空間。
四、定位元素層疊屬性:
z-index : auto | number檢索或設置對象的層疊順序。
auto:默認值。遵從其父對象
number:無單位的整數值。可為負數
說明:
1)較大 number 值的對象會覆蓋在較小 number 值的對象之上。如兩個絕對定位對象的此屬性具有同樣的 number 值,那么將依據它們在HTML文檔中聲明的順序層疊。
此屬性僅僅作用於 position 屬性值為 relative 或 absolute,fixed 的對象。
五、透明屬性
IE8以下瀏覽器寫法:filter:alpha(opacity=value);取值范圍 1-100兼容其他瀏覽器寫法:opacity:.value;(value的取值范圍0-1,0.1,0.2,0.3-----0.9)
background:rgba(255,255,0,0.5);IE8以上的瀏覽器,不會影響內容的透明度
六、命名錨點鏈接的應用
定義:是網頁制作中超級鏈接的一種,又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級鏈接,運用相當普遍。命名錨點鏈接的應用:
1)命名錨點的作用:在同一頁面內的不同位置進行跳轉。
2)給元素定義命名錨記名
語法:<標記 id="命名錨記名"> </標記>
3)命名錨記連接
語法:<a href="#命名錨記名稱"></a>