CSS定位如何使用

本文小編為大家詳細介紹“CSS定位如何使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“CSS定位如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

1.position

• static:positon定位的默認值，沒有定位
  設置top跟left無效

• relative:生成相對定位的元素，相對于其正常位置進行定位，一般在子元素設置absoute定位時，給父元素設置relative元素的位置通過top、right、bottom、left  控制，其值的定位起點都是是父元素左上角(這點和absoute、fixed不一樣)
  

上圖中我們給father塊元素加了一個向左向上各100px的相對定位，father的父元素就是body，所以father相對于body進行偏移，son塊元素在加上相對定位后，由于他是在father下的子元素，假如father沒有加定位，那么son是相對于body進行偏移的，實際上上圖中father有加上定位，所以son是相對于father進行偏移，不是相對bady進行偏移。總結：相對定位都是相對于父元素左上角進行偏移，假如沒父元素就一層一層往上找

• absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位，元素的位置通過top、right、bottom、left  控制
  

首先absolute是相對于static 定位以外的第一個父元素進行定位，淺顯說就是相對于有設定位屬性，但不包含定位屬性為static的父元素進行定位，只需父元素有設定位為relative或者absolute 等等都可以相對其進行定位。其次top跟left是相對于父元素左上角進行定位，right跟bottom是相對于父元素右下角進行定位

• fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位，和absoute的區別是fixed不會跟隨屏幕滾動(常見的各種貼屏廣告)元素的位置通過top、right、bottom、left  控制
  

通過上圖我們給son的父元素加了相對定位，但在給子元素加fixed時我們發現son元素是相對于瀏覽器窗口進行定位的，父元素對其毫無限制作用

• sticky：它的體現就像position:relative和position:fixed的合體:

淺顯說就是在頁面不進行滾動時他體現出來的特性就是relative，但當頁面進行滾動時他體現出來就是fixed的特性

2.z-index

定義一個元素在文檔中的層疊順序，適用于定義position的元素

當使用定位有多層疊在一起可以通過z-index屬性定義來定義什么元素排在最上面,比方有些彈窗顯示需要有個蒙層在加彈窗內容，這時需要用定位把蒙層先定位在內容上面進行遮蓋，在把彈窗內容定位在蒙層上，這時就需要z-index進行定位什么元素顯示在上面，通過設置彈窗的z-inde值大于蒙層的z-index值即可以實現彈窗在蒙層之上

3.clip：定義了元素的哪一部分是可見的。區域外的部分是透明的，適用于絕對定位元素

值為auto時表示對象無剪切，比方一個寬高為100px的元素，clip: rect(auto auto auto auto)跟clip: rect(0px 100px 100px 0px)都表示不會對元素進行剪裁，第一個值表示從上往下剪裁到設定值，為0就是從上面剪裁到0px也就是不剪裁，第二個值表示從右邊剪裁到設定值，100就表示從右邊剪裁到寬度100px的位置，也就沒有剪裁效果

讀到這里，這篇“CSS定位如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。