這篇文章主要講解了“css定位怎么設(shè)置”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css定位怎么設(shè)置”吧！

成都創(chuàng)新互聯(lián)公司專注于蜀山企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站建設(shè)。蜀山網(wǎng)站建設(shè)公司,為蜀山等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

定位

1.position

• static:positon定位的默認(rèn)值，沒(méi)有定位
  設(shè)置top跟left無(wú)效

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

上圖中我們給father塊元素加了一個(gè)向左向上各100px的相對(duì)定位，father的父元素就是body，所以father相對(duì)于body進(jìn)行偏移，son塊元素在加上相對(duì)定位后，由于他是在father下的子元素，假如father沒(méi)有加定位，那么son是相對(duì)于body進(jìn)行偏移的，實(shí)際上上圖中father有加上定位，所以son是相對(duì)于father進(jìn)行偏移，不是相對(duì)bady進(jìn)行偏移?？偨Y(jié)：相對(duì)定位都是相對(duì)于父元素左上角進(jìn)行偏移，假如沒(méi)父元素就一層一層往上找

• absolute 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位，元素的位置通過(guò)top、right、bottom、left  控制
  

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

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

通過(guò)上圖我們給son的父元素加了相對(duì)定位，但在給子元素加fixed時(shí)我們發(fā)現(xiàn)son元素是相對(duì)于瀏覽器窗口進(jìn)行定位的，父元素對(duì)其毫無(wú)限制作用

• sticky：它的體現(xiàn)就像position:relative和position:fixed的合體:

淺顯說(shuō)就是在頁(yè)面不進(jìn)行滾動(dòng)時(shí)他體現(xiàn)出來(lái)的特性就是relative，但當(dāng)頁(yè)面進(jìn)行滾動(dòng)時(shí)他體現(xiàn)出來(lái)就是fixed的特性

2.z-index

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

當(dāng)使用定位有多層疊在一起可以通過(guò)z-index屬性定義來(lái)定義什么元素排在最上面,比方有些彈窗顯示需要有個(gè)蒙層在加彈窗內(nèi)容，這時(shí)需要用定位把蒙層先定位在內(nèi)容上面進(jìn)行遮蓋，在把彈窗內(nèi)容定位在蒙層上，這時(shí)就需要z-index進(jìn)行定位什么元素顯示在上面，通過(guò)設(shè)置彈窗的z-inde值大于蒙層的z-index值即可以實(shí)現(xiàn)彈窗在蒙層之上

3.clip：定義了元素的哪一部分是可見(jiàn)的。區(qū)域外的部分是透明的，適用于絕對(duì)定位元素

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

感謝各位的閱讀，以上就是“css定位怎么設(shè)置”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css定位怎么設(shè)置這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！