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定位怎么設置”的內容了，經過本文的學習后，相信大家對css定位怎么設置這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！