css中定位是什么

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

創新互聯-專業網站定制、快速模板網站建設、高性價比烏魯木齊網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式烏魯木齊網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋烏魯木齊地區。費用合理售后完善，十年實體公司更值得信賴。

一、相對定位

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

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

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

二、絕對定位

position: absolute

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

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

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

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

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

三、z-index

z-index詳細介紹

1、z-index 定義：

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

2、遇到的坑：

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

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

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

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

四、固定定位

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

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

關于css中定位是什么問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創新互聯行業資訊頻道了解更多相關知識。

名稱欄目：css中定位是什么
網頁網址：http://m.kartarina.com/article12/jedpgc.html

成都網站建設公司_創新互聯，為您提供網站設計公司、手機網站建設、建站公司、定制網站、做網站、ChatGPT

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯