你真的瞭解z-index屬性了嗎?

阿新 • • 發佈：2019-01-11

在編碼的過程中,我們常常用z-index去控制元素的層疊順序.那麼我們真的瞭解它了嗎?

z-index的語法:(參考W3C文件)

屬性	值
Value	auto integer inherit
Initial	auto
Applies to	positioned elements
Inherited	no
Percentages	N/A
Media	visual
Computed value	as specified

要注意是:z-index只能應用於定位元素(即設定了position屬性非static 值).

W3C的描述:(W3C原文)

每個元素都具有三維的空間座標,除了水平和垂直位置外,還有一個”Z軸”座標,通過改變”Z軸”的座標,我們可以實現元素的層疊.
在文件中，每個元素僅屬於一個層疊上下文。元素的層疊級別為整型，它描述了在相同層疊上下文中元素在Z軸” 上的呈現順序。
同一層疊上下文中，層疊級別大的顯示在上，層疊級別小的顯示在下，相同層疊級別時，遵循後來居上的原則，即其在HTML文件中的順序。
不同層疊上下文中，元素呈現順序以父級層疊上下文的層疊級別來決定呈現的先後順序，與自身的層疊級別無關。

層疊上下文的建立:

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of ‘z-index’ other than ‘auto’. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example ‘opacity’

意思是:: 頁面根元素會形成層疊上下文，其他層疊上下文的產生由z-index值不為auto的定位元素(positioned 非static).層疊上下文不一定與包含塊有關。在新版本的CSS中,其他的一些屬性也會產生層疊上下文,比如 ‘opacity’.; 通俗地說:當某個元素的 z-index 未顯式定義或者被指定為 auto 時，該元素不會產生新的區域性層疊上下文。也就是說它可以和兄弟，祖先，後輩元素處在同一個堆疊上下文中，它們被放在一起比較層疊級別，兒子可以蓋住祖先，父親也可以蓋住兒子，兒子甚至可以越過祖先，蓋住祖先的兄弟，在層疊上下文中，它們是並級的關係。

都處於一個層疊上下文中的情況:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a,.b,.c,.a1 {width:100px;height:100px;}
        .a{
           background: #28d67a;
        }
        .b{
            background: #ccc;
            margin-top: -80px;
            margin-left: 50px;
        }
        .c{
            background: #62d4ea;
            margin-top: -50px;
            margin-left: 30px;
        }
        .a1 {
            height:50px;
            background: #ffff00;
            margin-left:20px;
            margin-top: -10px;
            z-index:333;//指定子元素的層疊值
            position: relative;
        }
    </style>
</head>
<body>
    <div class="a">
        a
        <div class="a1">
            a1
        </div>
    </div>
    <div class="b">b</div>
    <div class="c">c</div>
</body>
</html>

效果圖: 這裡寫圖片描述

當父元素處於同一級的層疊上下文中,改變子元素的z-index可以覆蓋父元素,父元素的兄弟元素等等….

處於不同層疊上下文中的情況:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a,.b,.c,.a1 {width:100px;height:100px;}
        .a{
            position: relative;
            z-index: 0;
            background: #28d67a;
        }
        .b{
            position: relative;
            z-index: 1;
            background: #ccc;
            margin-top: -80px;
            margin-left: 50px;
        }
        .c{
            position: relative;
            z-index: 1;
            background: #62d4ea;
            margin-top: -50px;
            margin-left: 30px;
        }
        .a1 {
            height:50px;
            background: #ffff00;
            margin-left:20px;
            margin-top: -10px;
            z-index:333;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="a">
        a
        <div class="a1">
            a1
        </div>
    </div>
    <div class="b">b</div>
    <div class="c">c</div>
</body>
</html>

效果圖: 這裡寫圖片描述
當父元素處於不同的層疊上下文中,如果父元素的z-index比兄弟元素的小,就運算元元素的z-index再高也沒什麼用,始終是覆蓋不了父元素的兄弟元素.

所以在這再次強調一下:

同一層疊上下文中，層疊級別大的顯示在上，層疊級別小的顯示在下，相同層疊級別時，遵循後來居上的原則，即其在HTML文件中的順序。
不同層疊上下文中，元素呈現順序以父級層疊上下文的層疊級別來決定呈現的先後順序，與自身的層疊級別無關。

在每一個層疊上下文中,的層疊順序:

1.the background and borders of the element forming the stacking context.

2.the child stacking contexts with negative stack levels (most negative first).

3.the in-flow, non-inline-level, non-positioned descendants.

4.the non-positioned floats.

5.the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

6.the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

7.the child stacking contexts with positive stack levels (least positive first).

根據上面的順序畫的圖:

這裡寫圖片描述

CSS3與新時代的層疊上下文

 css3中的一些新屬性也會影響層疊上下文;下面列出一下屬性:

z-index值不為auto的flex項(父元素display:flex|inline-flex).
元素的opacity值不是1.
元素的transform值不是none.
元素mix-blend-mode值不是normal.
元素的filter值不是none.
元素的isolation值是isolate.
will-change指定的屬性值為上面任意一個。
元素的-webkit-overflow-scrolling設為touch.

下面我用opacity來說明:

當opacity值小於1時，該元素會建立新的區域性層疊上下文，也就是說它可以和定位元素進行層疊層別比較
當opacity值小於1時，該元素擁有層疊級別且相當於z-index:0或auto，但不能定義 z-index ，除非本身是定位元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a,.b,.c,.a1 {width:100px;height:100px;}
        .a{
            opacity:0.9;
            background: #28d67a;
        }
        .b{
            background: #ccc;
            margin-top: -80px;
            margin-left: 50px;
        }
        .c{
            background: #5c5c5c;
            margin-top: -50px;
            margin-left: 30px;
        }
        .a1 {
            height:50px;
            background: #ffff00;
            margin-left:20px;
            margin-top: -10px;
            z-index:333;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="a">
        a
        <div class="a1">
            a1
        </div>
    </div>
    <div class="b">b</div>
    <div class="c">c</div>
</body>
</html>

效果:
這裡寫圖片描述

這裡寫圖片描述

通過上圖的對吧,大家可以看得出差異在哪了吧.還有很多其他的屬性,這裡就不一一去說了.有什麼錯誤的話,請指正.

你真的瞭解z-index屬性了嗎?

在編碼的過程中,我們常常用z-index去控制元素的層疊順序.那麼我們真的瞭解它了嗎? z-index的語法:(參考W3C文件) 屬性值 Value auto integer inherit Initial a

校園網路安全CTF 第一題和你真瞭解我嗎？

第一題：需要先找到相應頭（REsponse header中的tips） <?php$flag = "***";if (isset($_GET['repo']))//檢測變數是否設定 { if (strcmp($_GET['repo'], $flag) == 0) //比較兩個

程式設計師必須瞭解的知識點——你搞懂mysql索引機制了嗎？

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200920184226245.jpg#pic_center) ## 一、索引是什麼 MySQL官方對索引的定義為：索引（Index）是幫助MySQL **高效** 獲取資料的資料結構，而MYSQL使用的資料結構是：*

java中你確定用對單例了嗎?

其它 safe 一個 with public 也會 sim data- 可見性作為程序員這樣的特殊物種來說,都掌握了一種特殊能力就是編程思想,邏輯比較慎重,可是有時候總會忽略到一些細節,比方我,一直以來總認為Singleton是設計模式裏最簡單的,不用

文章遲遲不被收錄，你的標簽寫對了嗎？

展示內容 blog fff pro color water png strong 標簽是什麽？要想知道標簽寫對了沒有，首先應該知道標簽是什麽。簡單來說，標簽是一篇文章的中心與重點詞匯的提煉。準確有效的標簽可是使搜索引擎更快速準確的認識到你的文章是寫什麽的，當然也更願意收

定位流之z-index屬性

設置 meta 解決開發 spa HA fixed eight charset 1.固定定位是脫離標準流的，不會占用標準流的空間 2.和絕對定位有點像，也不區分行內塊級元素 3.類似於前面學的背景關聯方式（讓某個背景圖片不隨滾動而滾動）讓某個元素不隨著滾動條的

區塊鏈寵物系統開發：你的遊戲裏寵物養成了嗎？

區塊鏈寵物遊戲養狗吸貓玩雞仔，區塊鏈遊戲已經得到很多人的喜愛，並且速速占據新應用玩法的一席之地，成為吸金法寶。區塊鏈作為新興技術的網紅選手。吸引了國內各大互聯網科技巨頭的入場，網易“招財貓”、百度“萊茨狗”、小米“加密兔”相繼上線，區塊鏈寵物養成遊戲大戰已經開始。區塊鏈寵物養成遊戲可以在PC端或者是手機端

CSS----z-index 屬性詳解

用途: z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。該屬性設定一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。注意: z-index 屬性值可以是負的, 如果為正數，則離使用者更近，為負數則表示離使用者更遠。

區塊鏈來了，真能沒有虛假資料了嗎？

　　區塊鏈下的程式化購買產生的變革根本上來源於區塊鏈技術幫助建立鏈上資料的可信賴，並幫助資料確權，使使用者增強了對自己所生產資料的控制力，使用者個體在程式化系統扮演了更加重要的角色。　　網站流量作弊發生在供給方，資料上鍊前後都是不被第三方平臺所控制的。由於數字廣告投放常

跳槽季？測試題沒有80分，你真的準備好換工作了嗎？

跳槽季？測試題沒有80分，你真的準備好換工作了嗎？這套簡單的技術測試題，你能的多少分呢金九銀十，換工作熱潮來臨！不滿意現有工作？想換更好的公司發展？先試試自己的技術基礎是否紮實吧~ 俗話說：“ 知彼知己，百戰不殆 ” 測一測這些前端面試題，你能得多少分？話不多說，直接放上測試

你真的瞭解 Unicode 和 UTF-8 嗎？

引言歡迎工作一到八年的Java工程師朋友們加入Java高階交流：854630135 本群提供免費的學習指導架構資料以及免費的解答不懂得問題都可以在本群提出來之後還會有直播平臺和講師直接交流噢一直以來總是對 unicode, UTF-8 等編碼知識懵懵懂懂

2018年你給移動手遊體檢了嗎？

近年來，隨著移動智慧手機的發展，移動手遊也成為一項快速發展的產業，並在最近一兩年呈現出蓬勃發展的態勢，尤其是以亞太地區最為明顯。據App Annie的研究顯示，2017全球iOS應用商店消費的50%以上來自亞太地區，每個地區70%以上的消費用於了遊戲。不同於以往人們熟悉的頁遊、端遊和網遊，

你的MySQL伺服器開啟SSL了嗎？

最近，準備升級一組MySQL到5.7版本，在安裝完MySQL5.7後，在其data目錄下發現多了很多.pem型別的檔案，然後通過查閱相關資料，才知這些檔案是MySQL5.7使用SSL加密連線的。本篇主要介紹MySQL5.7 SSL連線加密功能、如何使用？以及使用SSL

你真的瞭解迴流和重繪嗎

迴流和重繪可以說是每一個web開發者都經常聽到的兩個詞語，我也不例外，可是一直不是很清楚這兩步具體做了什麼事情。最近由於部門內部要做分享，所以對其進行了一些研究，看了一些部落格和書籍，整理了一些內容並且結合自己的體會，寫了這篇文章，希望可以幫助到大家。瀏覽器的渲染過程本文先從瀏覽器的渲染過程來從頭到尾

你真的踏入前端的大門了嗎？32道小題點燃你的卡路里

近些年，網際網路的飛速發展，Web前端這一行也是越來越吃香，所以學習前端或者轉行做前端的人也是越來越多。但是你確定能夠找到一份稱心滿意的工作嗎？你的能力真的已經達到了可以不如職場的地步了嗎？生活沒有你想象的那麼簡單，下面小編為大家準備了32道題，看看你自己能夠回答出多少道。

【轉載】你真的瞭解 Unicode 和 UTF-8 嗎？

目錄引言 ASCII 碼什麼是 ASCII 碼？ ASCII 碼都包含哪些字元？ ASCII 碼的侷限在哪裡？ Unicode 什麼是 Unicode ? Unicode 的實現方式有幾種？ Unicode 的體系結構是什麼樣的？ UTF-8 編碼 UCS-2 編碼 UTF-16 編

你真的瞭解迴流和重繪嗎?

作者：我不是陳紀庚https://segmentfault.com/a/1190000017329980 迴流和重繪可以說是每一個web開發者都經常聽到的兩個詞語，我也不例外，可是我之前一直不是很清楚這兩步具體做了什麼事情。最近由於部門內部要做分享，所以對其進行了一些研究，看了一些部落格和書籍，整理了一些內

你的白皮書，寫對了嗎？

白皮書是愛西歐不可分割的一部分。一旦創始人決定通過愛西歐的方式融資，則需要開始進行準備工作——撰寫白皮書是其中之一，創始人必須儘可能多的注意細節、資訊及準確性。對於任何想要啟動愛西歐的創業者來說，理解“白皮書”至關重要。白皮書的本質是創業者向潛在投資人進行的融資宣傳，因此需要

我的Windows日常——你的小電影藏好了嗎？

Hello! everybody! 記得大三，第一次上我們某主任的課（我是計算機學部的），某主任上課的第一件事，點名，第二件事，忽悠我們。具體忽悠步驟如下：某：”同學們，這裡有兩張圖片，大家看看這兩張圖片有

CSS z-index 屬性控制div上下層次

<html><head><style type="text/css">#img1{position:absolute;left:0px;top:0px;z-index:-1}</style><script type="text/javascript">

你真的瞭解z-index屬性了嗎?

相關推薦