css 層疊與z-index的示例代碼
我要評論層疊與層疊等級
HTML 元素是一個三維的概念，除了水平和垂直方向外，還會在“z 軸”上層層疊加。
既然是疊加，就會涉及到先后順序的問題，規(guī)范中稱之為“層疊等級”。
默認情況下，圖文是網(wǎng)頁的核心，因此內(nèi)聯(lián)元素的等級理應最高；然后是布局，其中浮動元素（脫離文檔流）的等級高于塊級元素；最低等級是設置背景、邊框等裝飾屬性的元素。
例子：
<style>
.f {
background-color: #ccffcc;
border: 1px dashed #669966;
padding: 10px;
}
.f div:first-of-type,
.f div:last-of-type {
background-color: rgba(255, 221, 221, .8);
border: 1px dashed #990000;
width: 200px;
height: 70px;
margin-left: 10px;
}
.f div:last-of-type {
background-color: rgba(221, 221, 255, .8);
border: 1px dashed #000099;
float: left;
margin-top: -90px;
margin-left: 30px;
}
label {
background-color: rgba(247, 236, 27, 0.8);
border: 1px dashed #FFC107;
padding: 5px;
}
</style>
<div class="f">
<label>hello</label>
<div></div>
<div></div>
</div>
如果元素發(fā)生了層疊，層疊等級大的會覆蓋小的；如果二者層疊等級相同，根據(jù)渲染的順序，后者會覆蓋前者。
例子：
<style>
.f {
background-color: #ccffcc;
border: 1px dashed #669966;
padding: 10px;
overflow: hidden;
}
.f div:first-of-type,
.f div:last-of-type {
background-color: rgba(255, 221, 221, .8);
border: 1px dashed #990000;
width: 200px;
height: 70px;
float: left;
}
.f div:last-of-type {
background-color: rgba(221, 221, 255, .8);
border: 1px dashed #000099;
margin-top: -40px;
margin-left: 30px;
}
</style>
<div class="f">
<div></div>
<div></div>
</div>
z-index 可以影響層疊等級
如果需要修改元素的層疊等級，可以在已定位的元素(1)上使用 z-index。
z-index 可以取正整數(shù)，0 或負整數(shù)；如果沒有 z-index （默認 z-index:auto ）或者 z-index 手動設置為 auto，則視為 0 處理。
*(1)指 position 值為 relative、absolute 或 fixed 的元素。
例子：
<style>
.f {
background-color: #ccffcc;
border: 1px dashed #669966;
padding: 10px;
position: relative;
z-index: 0;
}
.f div:first-of-type,
.f div:last-of-type {
background-color: rgba(255, 221, 221, .8);
border: 1px dashed #990000;
width: 200px;
height: 70px;
margin-left: 10px;
}
.f div:last-of-type {
background-color: rgba(221, 221, 255, .8);
border: 1px dashed #000099;
margin-left: 30px;
position: absolute;
top: 14px;
/* z-index: -1; */
}
label {
background-color: rgba(247, 236, 27, 0.8);
border: 1px dashed #FFC107;
padding: 5px;
}
</style>
<div class="f">
<label>hello</label>
<div></div>
<div></div>
</div>
z-index 取正整數(shù)，0 或 auto 時：
z-index 取負整數(shù)時：
細心的人可能會發(fā)現(xiàn)，在例子中，我們?yōu)檠b飾元素（類名 f）設置了定位屬性，并且 z-index 設置為 0。如果不這樣設置，當元素（藍色背景的測試元素） z-index 取負整數(shù)時，就會跑到裝飾元素的后面。有關于這一點，后面“z-index 取負整數(shù)值”會講到。
z-index 與層疊上下文
z-index 可以影響層疊等級，但有個前提條件非常重要，就是參與比較的元素必須在同一個層面上，規(guī)范中稱之為“層疊上下文”。“上下文”說明這是一塊封閉的區(qū)域，區(qū)域內(nèi)的子元素不會影響到外部元素；而“層疊”，則意味著只要元素創(chuàng)建這個區(qū)域，就會在“z軸”上高于當前上下文。
層疊上下文可以通過一些 CSS 屬性創(chuàng)建，常見的屬性如下：
- html 元素默認創(chuàng)建的，稱為根層疊上下文，所有元素都會置于這個層上。
- position 值為 relative 或 absolute，且 z-index 值不是 auto(1)。
- position 值為 fixed。
- CSS3 新屬性，比如 opacity 值不是 1、 transform 值不是 none、z-index 值不是 auto 的 flex 和 grid 布局元素等等。
*(1)雖說 z-index:auto 和 z-index:0 可以看成是一樣 ，但 z-index: auto 所在的元素只是一個普通定位元素，而 z-index:0 會創(chuàng)建一個層疊上下文。兩者等級相同，后者將覆蓋前者。
實際工作中，很少使用 CSS3 新屬性去主動創(chuàng)建層疊上下文，因此，創(chuàng)建層疊上下文最常用的方法是，給定位元素設置 z-index 整數(shù)值。
前面介紹過，z-index 可以修改元素在當前層疊上下文中的層疊等級，現(xiàn)在 z-index 又有了另一層含義，即創(chuàng)建一個新的層疊上下文。
下面，通過例子來更好的理解層疊上下文：
例子：
<style>
.f {
background-color: #ccffcc;
border: 1px dashed #669966;
height: 80px;
position: relative;
margin-bottom: 10px;
}
.f_1>div {
background-color: rgba(255, 221, 221, .8);
border: 1px dashed #990000;
width: 150px;
height: 200px;
position: absolute;
top: 20px;
left: 170px;
}
.f_2>div {
background-color: rgba(221, 221, 255, .8);
border: 1px dashed #000099;
width: 200px;
height: 70px;
position: absolute;
top: 65px;
left: 50px;
}
</style>
<div class="f f_1">#1
<div>#3
</div>
</div>
<div class="f f_2">#2
<div>#4
</div>
</div>
例子中，沒有元素設置 z-index 值，此時 z-index 就是默認的 auto，因此，元素按照渲染順序，后者覆蓋前者。
如果為#3、#4設置正的 z-index 值，如下：
.f_1>div {
z-index: 1;
}
.f_2>div {
z-index: 2;
}
此時，父元素#1、#2并沒有設置 z-index 值，因此它們不會創(chuàng)建新的層疊上下文，這意味著#3、#4仍然同屬于根層疊上下文。
同一層疊上下文，層疊等級大的會覆蓋小的，所以#4在所有元素之上。
現(xiàn)在為#2、#3、#4設置 z-index 值，如下：
.f_1>div {
z-index: 2;
}
.f_2 {
z-index: 1;
}
.f_2>div {
z-index: 9;
}
盡管#4的 z-index 值大于#3的，但由于#4屬于#2的子元素，其層疊等級完全受制于#2的等級。#2和#3同屬于根層疊上下文，且#3大于#2，因此#3在#2（及其子元素）之上。
z-index 取負整數(shù)值
常規(guī)理解 z-index 取負值，應該會跑到背景色的后面：
例子：
<style>
.f {
background-color: rgba(204, 255, 204, .8);
border: 1px dashed #669966;
padding: 10px;
}
.f div {
background-color: rgba(255, 221, 221, .8);
border: 1px dashed #990000;
width: 200px;
height: 70px;
position: relative;
top: 45px;
z-index: -1;
}
</style>
<div class="f">
<div></div>
</div>
實際工作中， z-index 取負值可以實現(xiàn)隱藏元素的效果。但如果為父元素創(chuàng)建層疊上下文，子元素就會隱藏不掉：
例子：
<style>
.f {
background-color: rgba(204, 255, 204, .8);
border: 1px dashed #669966;
padding: 10px;
position: relative;
z-index: 0;
}
.f div {
background-color: rgba(255, 221, 221, .8);
border: 1px dashed #990000;
width: 200px;
height: 70px;
position: relative;
top: 45px;
z-index: -1;
}
</style>
<div class="f">
<div></div>
</div>
前后例子對比之后，已經(jīng)很明顯的表明，不管 z-index 的負值多大，依然無法突破當前層疊上下文。
到此這篇關于css 層疊與z-index的示例代碼的文章就介紹到這了,更多相關css 層疊與z-index內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
css之Display、Visibility、Opacity、rgba和z-index: -1的區(qū)別
這篇文章主要介紹了css之Display、Visibility 和 Opacity 的區(qū)別,方便我們后期根據(jù)需要選擇，需要的朋友可以參考下2020-11-07
解決CSS中子元素z-index與父元素兄弟節(jié)點的層級問題
這篇文章主要介紹了解決CSS中子元素z-index與父元素兄弟節(jié)點的層級問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可2020-06-17
這篇文章主要介紹了CSS3關于z-index不生效問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2020-02-19- 這篇文章主要介紹了z-index為負值的元素無法點擊到的解決方法,需要的朋友可以參考下2016-10-27
- 這篇文章主要介紹CSS z-index 層級關系優(yōu)先級的概念，講解的比較詳細，需要的朋友可以參考下。2016-06-06
- 這篇文章主要介紹了css z-index層重疊順序使用介紹,需要的朋友可以參考下2014-11-04
css中z-index: 0和z-index: auto的區(qū)別
本文主要介紹了css中z-index: 0和z-index: auto的區(qū)別，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-11
