Z-index屬性
2022-05-31 分類： 網(wǎng)站建設(shè)
Z-index屬性決定了一個(gè)HTML元素的層疊級(jí)別。元素層疊級(jí)別是相對(duì)于元素在Z軸上（與X軸Y軸相對(duì)照）的位置而言。一個(gè)更高的Z-index值意味著這個(gè)元素在疊層順序中會(huì)更靠近頂部。這個(gè)層疊順序沿著垂直的線軸被呈現(xiàn)。
自然的層疊順序
在一個(gè)HTML頁(yè)面中，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的。下面的是一個(gè)列表，它展示的列表項(xiàng)是處于一個(gè)層疊環(huán)境（stacking context，暫時(shí)未找到合適的漢語(yǔ)翻譯，應(yīng)該是指層疊的元素所處的那個(gè)層疊的環(huán)境）中，這些項(xiàng)是處于這個(gè)層疊環(huán)境的底部的。這個(gè)列表中的項(xiàng)都沒有被賦予Z-index屬性。
元素的背景和邊框會(huì)創(chuàng)建一個(gè)stacking context
引用:
當(dāng)然，除非元素已經(jīng)被定位按照互相交疊的形式展現(xiàn)，否則元素的層疊順序并不會(huì)特別的明顯。下面的，負(fù)邊距的BOX被拿來展示，用以說明自然的層疊順序。
使Z-index并不是一個(gè)難以理解的屬性，但它卻會(huì)因錯(cuò)誤的假設(shè)而使很多初級(jí)的開發(fā)人員陷入混亂。混亂發(fā)生的原因是因?yàn)閆-index只能工作在被明確定義了absolute，fixed或relative 這三個(gè)定位屬性的元素中。
自然的層疊順序
在一個(gè)HTML頁(yè)面中，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的。下面的是一個(gè)列表，它展示的列表項(xiàng)是處于一個(gè)層疊環(huán)境（stacking context，暫時(shí)未找到合適的漢語(yǔ)翻譯，應(yīng)該是指層疊的元素所處的那個(gè)層疊的環(huán)境）中，這些項(xiàng)是處于這個(gè)層疊環(huán)境的底部的。這個(gè)列表中的項(xiàng)都沒有被賦予Z-index屬性。
元素的背景和邊框會(huì)創(chuàng)建一個(gè)stacking context
引用:
- 具有負(fù)值的stacking contexts元素，按照出現(xiàn)的先后順序排列（越靠后層級(jí)越靠上）
- 沒有被定位，沒有浮動(dòng)的塊級(jí)元素，按照出現(xiàn)的先后順序排列
- 沒有被定位，浮動(dòng)的元素，按照出現(xiàn)的先后順序排列
- 內(nèi)聯(lián)元素，按照出現(xiàn)的先后順序排列排列
- 被定位的元素，按照出現(xiàn)的先后順序排列
當(dāng)然，除非元素已經(jīng)被定位按照互相交疊的形式展現(xiàn)，否則元素的層疊順序并不會(huì)特別的明顯。下面的，負(fù)邊距的BOX被拿來展示，用以說明自然的層疊順序。
使Z-index并不是一個(gè)難以理解的屬性，但它卻會(huì)因錯(cuò)誤的假設(shè)而使很多初級(jí)的開發(fā)人員陷入混亂。混亂發(fā)生的原因是因?yàn)閆-index只能工作在被明確定義了absolute，fixed或relative 這三個(gè)定位屬性的元素中。
分享文章：Z-index屬性
URL網(wǎng)址：http://www.rwnh.cn/news21/161921.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、做網(wǎng)站、服務(wù)器托管、網(wǎng)站設(shè)計(jì)、企業(yè)建站、品牌網(wǎng)站設(shè)計(jì)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 在無錫企業(yè)網(wǎng)站SEO優(yōu)化關(guān)鍵的技巧 2022-05-31
- 外貿(mào)老司機(jī)的八個(gè)關(guān)鍵詞帶你飛 2022-05-31
- 如何提高網(wǎng)站客戶訪問量 2022-05-31
- 如何巧妙避免關(guān)鍵詞的內(nèi)部競(jìng)爭(zhēng) 2022-05-31
- 如何設(shè)計(jì)一個(gè)落地頁(yè)，才算得上是一個(gè)好的落地頁(yè)？ 2022-05-31
- 百度聯(lián)盟深挖流量?jī)r(jià)值 2022-05-31
- 怎么能讓網(wǎng)站上百度首頁(yè)？百度信譽(yù)了解一下 2022-05-31
- 網(wǎng)站滲透測(cè)試中的歷程經(jīng)驗(yàn)記錄分析 2022-05-31
- 網(wǎng)絡(luò)事件營(yíng)銷你真的“盈”了嗎？ 2022-05-31
- 在無錫中小企業(yè)建設(shè)手機(jī)網(wǎng)站有哪些技巧 2022-05-31
- 電商淘客快速引流的方法 2022-05-31
- 想做一款群眾喜聞樂見的產(chǎn)品？快看這四個(gè)步驟 2022-05-31
- “可信網(wǎng)站認(rèn)證”的用處是什么？ 2022-05-31
- 網(wǎng)站的功能要保障網(wǎng)站的特色 2022-05-31
- 一套不錯(cuò)的zend studio 10 字體和顏色搭配設(shè)置 2022-05-31
- 原創(chuàng)文章對(duì)網(wǎng)站的好處有哪些？ 2022-05-31
- 網(wǎng)站優(yōu)化會(huì)經(jīng)歷哪些時(shí)期？ 2022-05-31
- 營(yíng)銷網(wǎng)站優(yōu)化中常犯的幾種網(wǎng)站過度優(yōu)化錯(cuò)誤? 2022-05-31
- 關(guān)于社區(qū)物流終端思考的二三事 2022-05-31