6 定位錨點透明

2022-04-29 14:48:07 字數 2225 閱讀 7900

day7:定位錨點透明

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

語法:position:static /absolute/relative/fixed

取值:1、static:預設值,無特殊定位,物件遵循html原則;

2、absolute:絕對定位,將物件從文件流中拖離出來,使用left/right/top/bottom等屬性相對其最接近的乙個並有定位設定的父元素進行絕對定位;如果不存在這樣的父物件,則依據根元素(html)《瀏覽器》進行定位,而其層疊通過z-index屬性定義

3、relative :相對定位,該物件的文件流位置不動,將依據right,top,left,bottom(相對定位)等屬性在正常文件流中偏移位置;其層疊通過z-index屬性定義

4、fixed:(固定定位)未支援,物件定位遵從絕對定位方式(absolute);但是要遵守一些規範(ie6瀏覽器不支援此定位) ;

z-index : auto |number

檢索或設定物件的層疊順序。

auto:預設值。遵從其父物件

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

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

說明:1)較大 數值的物件會覆蓋在較小 數值的物件之上。如兩個絕對定位物件的此屬性具有同樣的 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.2,0.3-----0.9---1)

1、插入flash

1)語法:

2、滾動字幕的應用:

內容

1,overflow內容溢位時的設定

屬性:

overflow 水平及垂直方向內容溢位時的設定 

overflow-x 水平方向內容溢位時的設定 

overflow-y 垂直方向內容溢位時的設定

以上三個屬性設定的屬性值:

visible、scroll、hidden、auto、

visible 預設值。使用該值時,無論設定的"width"和"height"的值是多少,其中的內容無論是否超出範圍都將被強制顯示。

hidden 效果與visible相反。任何超出"width"和"height"的內容都會不可見。

scroll 無論內容是否超越範圍,都將顯示滾動條。

auto 當內容超出範圍時,顯示滾動條,否則不顯示。

應用:

1)沒有水平滾動條:

test

2)沒有垂直滾動條 

test

3)沒有滾動條 

test

4)自動顯示滾動條

test

2、自己定義滾動條的顏色

body

返回頂部

定位錨點透明

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...

定位與錨點

只能用定位來實現層疊的效果 absolute預設為瀏覽器視窗 position static absolute relative fixed inherit 1.static 預設定位方式 2.absolute 絕對定位,將物件從文件流中完全脫離出來,使用left right top bottom進...