定位 錨點 透明
阿新 • • 發佈:2019-01-21
參考 內容 寫法 層級 opacity index 正常的 自己的 窗口
缺點:子元素是浮著的,下面的內容會跑上去
3、relative : 相對定位
特點
1、不脫離文本流,不會飄起來
2、默認情況下,參照物是自己原來的位置,包含結構也是一樣
3、當所有的元素都給了相對定位,元素不會覆蓋上去,如果添加了上下左右方向值,元素會覆蓋
缺點:只在原來的位置移動,即使位置移動了,原來的位置還在
解決方法:給父元素加相對定位,子元素加絕對定位
4、fixed: (固定定位)未支持,對象定位遵從絕對定位方式(absolute);但是要遵守一些規範(IE6瀏覽器不支持此定位) ;
,包含塊就是為絕對定位元素提供坐標,偏移和顯示範圍的參照物,即確定絕對定位的偏移起點和百分比 長度的參考;
默認狀態下,body是一個大的包含塊,所有絕對定位的元素都是根據窗口來定自己所處的位置和百分比大小的顯示的,如果我們定義了包含元素為包含元素塊以後,對於被包含的絕對定位元素來說,就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置。
定義元素為包含塊:給絕對定位元素的父元素添加聲明position:relative;
如果父素設置了position:absolute;那麽子元素也會相對父元素來定義自己的位置。
絕對和相對定位的區別
1、參照物不同,絕對定位(absolute)的參照物是包含塊(父級),相對定位的參照物是元素本身位置;
2、絕對定位將對象從文檔流中拖離出來因此不占據空間,相對定位不破壞正常的文檔流順序無論是否進行移動,元素仍然占據原來的空間。
一、position 定位屬性和屬性值
position 定位屬性,檢索對象的定位方式; 語法: position:static /absolute/relative/fixed 取值: 1、static: 默認值,無特殊定位,對象遵循HTML原則; 2、absolute: 絕對定位 特點: 1、脫離文本流,會飄起來,用上下左右給數值定位 2、默認情況下,絕對定位的參照物是頁面的第一屏 3、當所有元素都給了定位時,顯示結果是後來者居上 4、如果子元素存在父元素裏,且父元素有定位,子元素偏移位置相對於父元素來進行移動二、定位元素的層級屬性
z-index : auto |number 檢索或設置對象的層疊順序。 auto:默認值。遵從其父對象 number:無單位的整數值。可為負數 說明: 1、沒有設置z-index時,最後寫的對象優先顯示在上層,設置後,數值越大,層越靠上; 2、較大數值的對象會覆蓋在較小數值的對象之上。如兩個絕對定位對象的此屬性具有同樣的 number 值,那麽將依據它們在HTML文檔中聲明的順序層疊。 此屬性僅僅作用於 position 屬性值 relative 或 absolute,fixed 的對象。三、包含塊的概念及作用
包含塊是絕對定位的基礎四、錨點連接的語法
定義: 是網頁制作中超級鏈接的一種,又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級鏈接,運用相當普遍。 命名錨點的作用: 在同一頁面內的不同位置進行跳轉。 制作錨標記: 1、給元素定義命名錨記名 語法:<標記 id="命名錨記名"> </標記> 2、命名錨記連接 語法:<a href="#命名錨記名稱"></a>五、透明寫法
IE瀏覽器寫法: filter:alpha(opacity=value);取值範圍 1-100 兼容其他瀏覽器寫法: opacity:0.value;(value的取值範圍 0-1 0.1,0.2,0.3-----0.9---1)定位 錨點 透明