css中定位是什么

css中定位是什么？針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

一、相對定位

position: relative
相對默認的布局位置進行定位，也就是相對自己應(yīng)該在的位置來定位。

.avatar {
  top: 3px; //從上到下偏移3px
  left: 7px; //從左到右偏移7px
  position: relative;
}

相對定位是沒有脫離普通文檔流的，對于頁面其他元素，box2還是待在原位的。

二、絕對定位

position: absolute

.box {
position:absolute;
top:10px;//相對定位點，從上到下偏移10px
left:10px; //相對定位點，從左到右偏移10px
}

• 絕對定位元素脫離正常文檔流，其他元素就看不見它。絕對定位元素也看不見絕對定位元素。所以下圖2個box2發(fā)生了重疊

• 絕對定位的定位對象是從它的父元素找是否有relative/fix/absolute。如果父元素設(shè)置了relative/fix/absolute，那父元素就是絕對定位元素的定位點，如果父元素沒有設(shè)置relative/fix/absolute，就繼續(xù)往上找，直到body和html為止。如果都找不到就是以html根節(jié)點為定位點。

所以使用absolute絕對定位的時候，最好在父元素上設(shè)置相對定位relative。

• 設(shè)置絕對定位之后，塊級元素寬度會收縮，寬度由內(nèi)容決定。行內(nèi)元素可以設(shè)置寬高，內(nèi)外邊距。

三、z-index

z-index詳細介紹

1、z-index 定義：

屬性設(shè)置元素的堆疊順序，該屬性設(shè)置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負數(shù)則表示離用戶更遠。也就是說擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

2、遇到的坑：

（1）、父元素z-index值更高，無論其子元素的z-index值大小，都可以覆蓋z-index值比父元素小的元素。

（2）、如果z-index的值為auto，不會構(gòu)成疊層上下文。

如下去掉div3的z-index，div3的子元素div4和div6都直接和div3同級的div1/div2相互疊層。demo

（3）、父子關(guān)系的z-index 如何設(shè)置，不影響它和 box 的堆疊順序。但我發(fā)現(xiàn)如果不設(shè)置父元素的z-index，然后再把子元素的z-index值設(shè)置為負數(shù)。父元素就會直接覆蓋子元素。
如下圖，box1沒有設(shè)置z-index，設(shè)置tooltip的z-index為負，box1就覆蓋了tooltip
demo鏈接鏈接描述，目前不得其意，之后補坑

四、固定定位

position: fixed
相對瀏覽器窗口進行定位。因此當滾動產(chǎn)生時，固定定位元素依然處于窗口的某個固定位置。
比如說瀏覽器右邊 回到頂部的按鈕就是采用的固定定位。

.feedback {
  right: 30px;
  bottom: 30px;
  position: fixed;
}

關(guān)于css中定位是什么問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。