一、position 定位屬性和屬性值position 定位屬性，檢索對象的定位方式；語法：position：static /absolute/relative/fixed/sticky/unset/inherit(未設置是inherit和initial的結合)/initial(最初的，初始的)取值 ...
一、position 定位屬性和屬性值
position 定位屬性，檢索對象的定位方式；
語法：position：static /absolute/relative/fixed/sticky/unset/inherit(未設置是inherit和initial的結合)/initial(最初的，初始的)
取值：
1、static：預設值，無特殊定位，對象遵循HTML原則；
2、absolute：絕對定位，將對象從文檔流中完全拖離出來，使用left/right/top/bottom等屬性相對其最接近的一個並有定位設置的
父元素進行絕對定位；如果不存在這樣的父對象，則依據《瀏覽器》進行定位，而其層疊通過z-index屬性定義
3、relative ：相對定位遵循正常的文檔流，將依據right，top，left，bottom（相對定位）等屬性在正常文檔流中相對自身位置進行偏移；其層疊通過z-index屬性定義.
4、fixed：(固定定位)，類似於絕對定位的方式，但是它的參照物是瀏覽器的“可視”視窗，且脫離標準文檔流；
5、sticky：(粘性定位) 相對離自己最近且有滾動條的父元素做的定位
粘性定位，該定位是相對定位和固定定位的結合，在跨越特定閾值前類似相對定位，之後類似固定定位。
二、定位元素的層級屬性
z-index : auto |number
設置定位對象的層疊順序。
auto：預設值。遵循結構，後寫的定位元素層的順序靠上。
number:無單位的整數值。可為負數，數值越大，層的順序越靠上
說明：
此屬性僅僅作用於 position 屬性值 relative 或 absolute,fixed ，sticky的對象。
三、包含塊的概念及作用
包含塊是絕對定位的基礎，包含塊就是為絕對定位元素提供坐標，偏移和顯示範圍的參照物，即確定絕對定位的偏移起點和百分比 長度的參考；
預設狀態下，瀏覽器是一個大的包含塊，所有絕對定位的元素都是根據視窗來定自己所處的位置和百分比大小的顯示的，如果我們定義了包含元素為包含元素塊以後，對於被包含的絕對定位元素來說，就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置。
定義元素為包含塊：給絕對定位元素的父元素添加聲明position：relative；
如果我們的父素設置了position:absolute;那麼子元素也會相對父元素來定義自己的位置。
絕對和相對定位的區別
1、參照物不同，絕對定位（absolute）的參照物是包含塊（父級），相對定位的參照物是元素本身位置；
2、絕對定位將對象從文檔流中拖離出來因此不占據空間，相對定位不破壞正常的文檔流順序無論是否進行移動，元素仍然占據原來的空間。
四、錨點連接的語法和應用場景
命名錨點的作用：在同一頁面內的不同位置進行跳轉。
錨點鏈接語法：
1)給元素定義命名錨記名
語法：<標記 id="命名錨記名"> </標記>
2)命名錨記連接
語法：<a href="#命名錨記名稱">鏈接文本或圖片</a>
五、透明寫法
IE9以下瀏覽器寫法：filter:alpha(opacity=value);取值範圍 0-100之間的整數值
相容其他瀏覽器寫法：opacity:0.5; (value的取值範圍0-1 0.1,0.2,0.3-----0.9---1)
rgba(255,255,0,0.5)(最後一位值表示透明，取值範圍0-1) 只支持IE8以上的瀏覽器
————————————————
版權聲明：本文為CSDN博主「巴布魯哈哈哈」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_45275992/article/details/128154368
