定位與錨點

2021-08-27 15:59:06 字數 945 閱讀 8500

只能用定位來實現層疊的效果

absolute預設為瀏覽器視窗

position:static/absolute/relative/fixed/inherit

1.static:預設定位方式;

2.absolute:絕對定位,將物件從文件流中完全脫離出來,使用left/right/top/bottom進行定位,如父元素無定位屬性,依據瀏覽器定位,其層疊屬性通過z-index來定義;

3.relative:相對定位遵循正常的文件流,將依據right/top/right/bottom等屬性在正常文件流中相對自身位置進行偏移,其層疊通過z-index屬性定義;

4.fixed:固定定位,類似絕對定位,但參照物是瀏覽器的可視視窗,且脫離標準文件流;

5.inherit:規定元素的定位方式繼承父元素的position屬性值。

注:     任何元素設定過脫離文件流的定位方式時,就有了塊元素的顯示特性;

絕對定位須有乙個參照物=包含塊

包含塊:包含關係,並且要設定定位(相對、絕對)

z-index:auto|number;

auto:預設值;

number:無單位的整數值。

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

語法:1.給元素定義命名錨記名

《標記 id=「命名錨記名」>2.命名錨記鏈結

ie9以下瀏覽器寫法:

filter:alpha(opacity=value);value值為0-100;

相容其他瀏覽器寫法:

opacity:value;value=0-1;零點幾可寫為點幾;

只支援ie8以上瀏覽器:

rgba(255,255,0,0.5)最後一位表示透明,取值0-1。

定位錨點透明

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

2017 7 18定位 錨點 overflow

position static relative absolute fixed 1.1.1在標準流中的預設定位就是 static 1.1.2靜態定位是不能通過 left,right,top,bottom 進行移動的。1.2.1相對定位是根據自己原本的位置進行定位的 1.2.2相對定位不能脫離標準流 ...

6 定位錨點透明

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