CSS之定位一(position屬性)

  • 時間:2018-07-21 23:30 作者:前端嘮嘮嗑 來源:前端嘮嘮嗑 閱讀:98
  • 掃一掃,手機訪問
摘要:本文我們探討涉及定位的position屬性。首先我們來看一下position對應的值及其含義(表1)。表1:position對應值其中static是默認值,當元素未定義position或者定義position值為static時,該元素內定義的top, bottom, left, right 和 z-

本文我們探討涉及定位的position屬性。首先我們來看一下position對應的值及其含義(表1)。

CSS之定位一(position屬性)

表1:position對應值

其中static是默認值,當元素未定義position或者定義position值為static時,該元素內定義的top, bottom, left, right 和 z-index無效。

relative表示相對定位,在文檔流中依然占有空間,其參考對象是離該元素最近的父元素。圖1表示父元素的position值變化時,子元素(position=relative)與父元素的相對位置,由圖可以看出其相對位置不隨父元素的position值變化而變化。

CSS之定位一(position屬性)

圖1:relative子元素位置變化

圖1中外框和除position屬性值不一樣外,其余css屬性均一致,其內外框html和相同部分css見圖2。

CSS之定位一(position屬性)

圖2:內外框html和相同部分css

absolute表示絕對位置,其在文檔流中不占空間,其參考對象是離該元素最近的position值不是static的父元素。由圖3可以看出。

CSS之定位一(position屬性)

圖3:absolute子元素位置變化

圖3中外框和除position屬性值不一樣外,其余css屬性均一致。其內外框html和相同部分css見圖4。

CSS之定位一(position屬性)

圖4:內外框html和相同部分css

值得注意的是,當其父元素position值均為static或者者未定義時,其參考對象應該是document(瀏覽器視窗大小的矩形)而不是網上所說的body元素或者者html元素。為驗證以上說法 我們設置下面三組對照,代碼如圖5所示,其中.fixed和.absolute的css樣式如圖6所示。.absolute始終完全覆蓋在.fixed上,由此可見.absolute的位置沒有隨html元素和body元素的變化而變化,因而其參考對象不是body元素或者者html元素。

CSS之定位一(position屬性)

圖5:三組對照

CSS之定位一(position屬性)

圖6:.fixed和.absolute的css樣式

fixed表示固定定位,相似于absolute,但是其是根據瀏覽器窗口定位的。

  • 全部評論(0)
最新發布的資訊信息
【系統環境|Linux】零基礎如何學好大數據?必備需要學習知識(2019-06-18 11:54)
【系統環境|】Hadoop環境中管理大數據存儲八大技巧(2019-06-15 11:01)
【系統環境|服務器應用】現在國內IT行業是不是程序員過多了?(2019-06-11 06:34)
【系統環境|服務器應用】新貴 Flutter(2) 自己設置 Widget(2019-06-11 06:34)
【系統環境|服務器應用】Android完整知識體系路線(菜鳥-資深-大牛必進之路)(2019-06-11 06:34)
【系統環境|服務器應用】Java程序員小伙經歷三個月備戰,終獲阿里offer(2019-06-11 06:34)
【系統環境|服務器應用】每日一問:談談對 MeasureSpec 的了解(2019-06-11 06:34)
【系統環境|服務器應用】【科普】晶體管-1(2019-06-11 06:34)
【系統環境|服務器應用】一個很多人都會答錯的java基礎題(2019-06-11 06:33)
【系統環境|服務器應用】深入了解枚舉類型(2019-06-11 06:33)
手機二維碼手機訪問領取大禮包
返回頂部
双色球号码300期遗传走势图