前端基礎(7) 定位錨點與透明屬性設定

2021-10-23 23:23:14 字數 2375 閱讀 7014

position 定位屬性,檢索物件的定位方式;

語法:position:static /absolute/relative/fixed   sticky(粘性定位)

relative相對定位/定位偏移量 position:relative; 相對定位

a、不影響元素本身的特性;

b、不使元素脫離文件流;

c、如果沒有定位偏移量,對元素本身沒有任何影響;

定位元素位置控制top/right/bottom/left 定位元素偏移量。

absolute絕對定位 position:absolute; 絕對定位

a、使元素完全脫離文件流;

d、如果有定位父級相對於定位父級發生偏移,沒有定位父級相對於整個文件發生偏移;

定位元素位置控制top/right/bottom/left 定位元素偏移量。

fixed固定定位 position:fixed; 固定定位

與絕對定位的特性基本一致,但差別是始終相對整個文件進行定位;

問題:ie6不支援固定定位;

sticky(粘性定位) position:sticky; 粘性定位

a、該元素並不脫離文件流。

b、當元素在容器中被滾動超過指定的偏移值時,元素在容器內固定在指定位置。亦即如果你設定了top: 50px,那麼在sticky元素到達距離相對定位的元素頂部50px的位置時固定,不再向上移動。

c、元素固定的相對偏移是相對於離它最近的具有滾動框的父元素,如果祖先元素都不可以滾動,那麼是相對於視窗來計算元素的偏移量

這個屬性的相容性還不是很好,目前仍是乙個試驗性的屬性,並不是w3c推薦的標準。它之所以會出現,也是因為監聽scroll事件來實現粘性布局使瀏覽器進入慢滾動的模式,這與瀏覽器想要通過硬體加速來提公升滾動的體驗是相悖的。

z-index : auto |number 檢索或設定物件的層疊順序。
auto:預設值。遵從其父物件

number:無單位的整數值。可為負數

沒有設定z-index時,最後寫的物件優先顯示在上層,設定後,數值越大,層越靠上;

說明:較大 數值的物件會覆蓋在較小 數值的物件之上。如兩個絕對定位物件的此屬性具有同樣的 number 值,那麼將依據它們在html文件中宣告的順序層疊。

此屬性僅僅作用於 position 屬性值 relative 或 absolute,fixed,sticky 的物件。

絕對定位的參照物,如果有定位父級相對於定位父級發生偏移,沒有定位父級相對於整個文件發生偏移;

包含塊是絕對定位的基礎,包含塊就是為絕對定位元素提供座標,偏移和顯示範圍的參照物,即確定絕對定位的偏移起點和百分比 長度的參考;

預設狀態下,html是乙個大的包含塊,所有絕對定位的元素都是根據視窗來定自己所處的位置和百分比大小的顯示的,

如果我們定義了包含元素為包含元素塊以後,對於被包含的絕對定位元素來說,就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置。

包含塊=絕對定位參照物

絕對定位參照物=整個文件=是定位父級

包含塊=html=定位功能父元素

定義元素為包含塊:給絕對定位元素的父元素新增宣告position:relative;

如果我們的父素設定了position:absolute;那麼子元素也會相對父元素來定義自己的位置。

絕對和相對定位的區別 1、參照物不同,絕對定位(absolute)的參照物是包含塊(父級),相對定位的參照物是元素本身位置;

2、絕對定位將物件從文件流中拖離出來因此不佔據空間,相對定位不破壞正常的文件流順序無論是否進行移動,元素仍然佔據原來的空間。

命名錨點鏈結的應用

定義:

是網頁製作中超級鏈結的一種,又叫命名錨記。命名錨記像乙個迅速定位器一樣是一種頁面內的超級鏈結,運用相當普遍。

命名錨點的作用:在同一頁面內的不同位置進行跳轉。

製作錨標記:

1)給元素定義命名錨記名

語法:標記id=

"命名錨記名"

>

標2)命名錨記連線

語法:href

="#命名錨記名稱"

>

a>

opacity:value;(value的取值範圍0-1 0.1,0.2,0.3-----0.9---1) 返回頂

定位錨點透明

position定位屬性和屬性值 定位元素的層級屬性 包含塊的概念和應用 錨點連線的語法和應用場景 透明屬性的應用 擴充套件 marquee 滾動字幕 position定位屬性 告訴瀏覽器這是定位屬性 語法 position static absolute relative fixed 取值 1 s...

Day7 定位錨點透明

position 定位屬性,檢索物件的定位方式 語法 position static absolute relative fixed inherit sticky unset 未設定是inherit和initial的結合 initial 最初的 取值 1 static 預設值,無特殊定位,物件遵循h...

6 定位錨點透明

day7 定位錨點透明 position 定位屬性,檢索物件的定位方式 語法 position static absolute relative fixed 取值 1 static 預設值,無特殊定位,物件遵循html原則 2 absolute 絕對定位,將物件從文件流中拖離出來,使用left ri...