position定位屬性和屬性值
定位元素的層級屬性
包含塊的概念和應用
錨點連線的語法和應用場景
透明屬性的應用
擴充套件:marquee(滾動字幕)
position定位屬性(告訴瀏覽器這是定位屬性);
語法:position:static/absolute/relative/fixed
取值:1、static:預設值,無特殊定位,遵循html原則;(無任何變化,網頁正常排版)
2、relative:什麼是相對定位?相對定位就是相對於自己以前在標準流中的位置來移動。
相對定位,配合right,top,left,bottom等屬性在正常文件流中偏移位置;
特點:3、absolute:什麼是絕對定位?絕對定位就是相對于父元素(設定了相對定位的元素)來定位的。
特點:4、fixed:什麼是固定定位?固定定位可以讓某個盒子不隨著滾動條的滾動而滾動(ie6瀏覽器不支援此定位);
特點:1.什麼是z-index屬性?預設情況下所有的元素都有乙個預設的z-index屬性,取值是0。z-index屬性的作用是專門用於控制定位流元素的覆蓋關係的。
z-index:auto|number
auto:預設值。遵從其父物件
numbei:無單位的整數值。可為負數
沒有設定z-index時,最後寫的物件優先顯示在上層,設定後,數值越大,層越靠上;
說明:較大數值的物件會覆蓋在較小數值的物件之上。如兩個絕對定位物件的此屬性具有同樣的number值,那麼將依據他們在html文件中宣告的順序層疊。此屬性僅僅作用於position屬性值relative或absolute,fixed的物件。
包含塊是絕對定位的基礎,包含塊就是為絕對定位元素提供座標,偏移和顯示範圍的參照物,即確定絕對定位的偏移起點和百分比長度的參考;
預設狀態下,body是乙個大的包含塊,所有絕對定位的元素都是根據視窗來定自己所處的位置和百分比大小的顯示的,如果我們定義了包含元素為包含元素塊以後,對於被包含的絕對定位元素來說,就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置。
定義元素為包含塊:給絕對定位元素的父元素新增宣告position:relative;
如果我們的父元素設定了position:absolute;那麼子元素也會相對父元素來定義自己的位置。
絕對和相對定位的區別
1、參照物不同,絕對定位(absolute)的參照物是包含塊(父級),相對定位的參照物是元素本身位置;
2、絕對定位將物件從文件流中拖離出來因此不佔據空間,相對定位不破壞正常的文件流順序無論是否進行移動,元素仍然佔據原來的空間。
命名錨點鏈結的應用
定義:是網頁製作中超連結的一種,又叫命名錨記。命名錨記像乙個迅速定位器一樣是一種頁面內的超級鏈結,運用相當普遍。
命名錨點的作用:在同一頁面內的不同位置進行跳轉。
製作錨標記:
1)給元素定義命名錨記名
語法:《標記id=「命名錨記名」>
ie瀏覽器寫法:filter:alpha(opacity=value);取值範圍 1-100
相容其他瀏覽器寫法:opacity:0.value; (value的取值範圍0-1)0.1---0.9-1
滾動字幕的應用:
內容
內容
6 定位錨點透明
day7 定位錨點透明 position 定位屬性,檢索物件的定位方式 語法 position static absolute relative fixed 取值 1 static 預設值,無特殊定位,物件遵循html原則 2 absolute 絕對定位,將物件從文件流中拖離出來,使用left ri...
Day7 定位錨點透明
position 定位屬性,檢索物件的定位方式 語法 position static absolute relative fixed inherit sticky unset 未設定是inherit和initial的結合 initial 最初的 取值 1 static 預設值,無特殊定位,物件遵循h...
定位與錨點
只能用定位來實現層疊的效果 absolute預設為瀏覽器視窗 position static absolute relative fixed inherit 1.static 預設定位方式 2.absolute 絕對定位,將物件從文件流中完全脫離出來,使用left right top bottom進...