聲明:文章僅為個人學習記錄纽帖,內(nèi)容并非原創(chuàng)
position 屬性值的含義:
-
static(默認)
元素框正常生成敢艰。塊級元素生成一個矩形框,作為文檔流的一部分,行內(nèi)元素則會創(chuàng)建一個或多個行框,置于其父元素中瞬雹。
-
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所占的空間仍保留昌讲。
-
absolute
元素框從文檔流完全刪除,并相對于其包含塊定位减噪。包含塊可能是文檔中的另一個元素或者是初始包含塊短绸。元素原先在正常文檔流中所占的空間會關(guān)閉车吹,就好像元素原來不存在一樣。元素定位后生成一個塊級框醋闭,而不論原來它在正常流中生成何種類型的框窄驹。
- 絕對定位的元素的位置相對于最近的已定位祖先元素,如果元素沒有已定位的祖先元素证逻,那么它的位置相對于最初的包含塊乐埠。
2.因為絕對定位的框與文檔流無關(guān),所以它們可以覆蓋頁面上的其它元素囚企≌筛溃可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序。
注:relative和static方式在最外層時是以<body>標簽為定位原點的龙宏,而absoulte方式在無父級是position非static定位時是以<html>作為原點定位扯罐。<html>和<body>元素相差9px左右。
注:使用absoulte或fixed定位的話烦衣,必須指定 left歹河、right、 top花吟、 bottom 屬性中的至少一個秸歧,否則left/right/top/bottom屬性會使用它們的默認值 auto ,這將導致對象遵從正常的HTML布局規(guī)則衅澈,在前一個對象之后立即被呈遞键菱,簡單講就是都變成relative,會占用文檔空間
注:
如果top和bottom一同存在的話今布,那么只有top生效经备。
如果left和right一同存在的話,那么只有l(wèi)eft生效部默。
-
fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute侵蒙,脫離了文檔流,并且能夠根據(jù)top傅蹂、right纷闺、left、bottom屬性進行定位份蝴,但不同的是fixed是根據(jù)窗口為原點進行偏移定位的犁功,也就是說它不會根據(jù)滾動條的滾動而進行偏移。
fixed:固定定位 absolute:絕對定位 區(qū)別很簡單:
1婚夫、沒有滾動條的情況下沒有差異
2浸卦、在有滾動條的情況下,fixed定位不會隨滾動條移動而移動案糙,而absolute則會隨滾動條移動
可以這么理解限嫌,fixed:固定在當前window不動靴庆, absolute:會隨參照對象元素的高度和寬度變化而變化
一般fixed用在遮蓋層和固定在頁面某個位置,如固定在頂端的菜單欄萤皂,又如彈出提示框居中顯示
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面匣椰。
元素可擁有負的 z-index 屬性值裆熙。
注釋:Z-index 僅能在定位元素上奏效(例如 position:absolute;)!
該屬性設(shè)置一個定位元素沿 z 軸的位置禽笑,z 軸定義為垂直延伸到顯示區(qū)的軸入录。如果為正數(shù),則離用戶更近佳镜,為負數(shù)則表示離用戶更遠僚稿。