CSS：你真的会用 z-index 吗？
生活随笔
收集整理的這篇文章主要介紹了
CSS：你真的会用 z-index 吗？
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
你真的會(huì)用 z-index 么？
如果你的 css 里面存在大量這樣的代碼：z-index：66、666、999、9999 可能你還不太理解 z-index 復(fù)制代碼HTML 元素是處于三維空間中
所有的盒模型元素都處于三維坐標(biāo)系中，除了我們常用的橫坐標(biāo)和縱坐標(biāo)，盒模型元素還可以沿著“z 軸”層疊擺放，當(dāng)他們相互覆蓋時(shí)，z 軸順序就變得十分重要。
但“z 軸”順序，不完全由 z-index 決定，在層疊比較復(fù)雜的 HTML 元素上使用 z-index 時(shí)，結(jié)果可能讓人覺(jué)得困惑，甚至不可思議。這是由復(fù)雜的元素排布規(guī)則導(dǎo)致的。
不含 z-index 元素如何堆疊？
當(dāng)沒(méi)有元素包含z-index屬性時(shí)，元素按照如下順序堆疊（從底到頂順序）：
注意：普通流中的“無(wú)定位塊級(jí)元素”始終先于“定位元素”渲染，并出現(xiàn)在“定位元素”下層，即便它們?cè)贖TML結(jié)構(gòu)中出現(xiàn)的位置晚于定位元素也是如此。
<!DOCTYPE html> <html> <head><style type="text/css">b {font-family: sans-serif;}div {padding: 10px;border: 1px dashed;text-align: center;}.static {position: static;height: 80px;background-color: #ffc;border-color: #996;}.absolute {position: absolute;width: 150px;height: 350px;background-color: #fdd;border-color: #900;opacity: 0.7;}.relative {position: relative;height: 80px;background-color: #cfc;border-color: #696;opacity: 0.7;}#abs1 {top: 10px;left: 10px;}#rel1 {top: 30px;margin: 0px 50px 0px 50px;}#rel2 {top: 15px;left: 20px;margin: 0px 50px 0px 50px;}#abs2 {top: 10px;right: 10px;}#sta1 {background-color: #ffc;margin: 0px 50px 0px 50px;} </style></head> <body><div id="abs1" class="absolute"><b>DIV #1</b><br />position: absolute;</div><div id="rel1" class="relative"><b>DIV #2</b><br />position: relative;</div><div id="rel2" class="relative"><b>DIV #3</b><br />position: relative;</div><div id="abs2" class="absolute"><b>DIV #4</b><br />position: absolute;</div><div id="sta1" class="static"><b>DIV #5</b><br />position: static;</div> </body></html> 復(fù)制代碼float 如何影響堆疊？
對(duì)于浮動(dòng)的塊元素來(lái)說(shuō)，層疊順序變得有些不同。浮動(dòng)塊元素被放置于非定位塊元素與定位塊元素之間：
z-index 如何影響堆疊？
z-index 屬性指定了一個(gè)具有定位屬性的元素及其子代元素的 z-order。 當(dāng)元素之間重疊的時(shí)候，z-order 決定哪一個(gè)元素覆蓋在其余元素的上方顯示。 通常來(lái)說(shuō) z-index 較大的元素會(huì)覆蓋較小的一個(gè)。
對(duì)于一個(gè)已經(jīng)定位的元素（即position屬性值不是static的元素），z-index 屬性指定：
堆疊上下文（Stacking Context）
什么是堆疊上下文？
層疊上下文（Stacking Context）是HTML元素的三維概念，這些HTML元素在一條假想的相對(duì)于面向（電腦屏幕的）視窗或者網(wǎng)頁(yè)的用戶(hù)的z軸上延伸，HTML元素依據(jù)其自身屬性按照優(yōu)先級(jí)順序占用層疊上下文的空間。
在層疊上下文中，其子元素的 z-index 值只在父級(jí)層疊上下文中有意義。子級(jí)層疊上下文被自動(dòng)視為父級(jí)層疊上下文的一個(gè)獨(dú)立單元。
- 層疊上下文可以包含在其他層疊上下文中，并且一起創(chuàng)建一個(gè)有層級(jí)的層疊上下文。
- 每個(gè)層疊上下文完全獨(dú)立于它的兄弟元素：當(dāng)處理層疊時(shí)只考慮子元素。
- 每個(gè)層疊上下文是自包含的：當(dāng)元素的內(nèi)容發(fā)生層疊后，整個(gè)該元素將會(huì) 在父層疊上下文中 按順序進(jìn)行層疊。
如何形成堆疊上下文？
- 根元素 (HTML)
- 定位元素（relative、absolute），并且 z-index 不為 auto；
- opacity 小于 1 時(shí)；
- transform 不為 none 時(shí)；
- z-index 不為 auto 的 flex-item；
注：層疊上下文的層級(jí)是 HTML 元素層級(jí)的一個(gè)層級(jí)，因?yàn)橹挥心承┰夭艜?huì)創(chuàng)建層疊上下文?？梢赃@樣說(shuō)，沒(méi)有創(chuàng)建自己的層疊上下文的元素 將被父層疊上下文包含。
<!DOCTYPE html> <html> <head><style type="text/css"> * {margin: 0; } html {padding: 20px;font: 12px/20px Arial, sans-serif; } div {opacity: 0.7;position: relative; } h1 {font: inherit;font-weight: bold; } #div1, #div2 {border: 1px dashed #696;padding: 10px;background-color: #cfc; } #div1 {z-index: 5;margin-bottom: 190px; } #div2 {z-index: 2; } #div3 {z-index: 4;opacity: 1;position: absolute;top: 40px;left: 180px;width: 330px;border: 1px dashed #900;background-color: #fdd;padding: 40px 20px 20px; } #div4, #div5 {border: 1px dashed #996;background-color: #ffc; } #div4 {z-index: 6;margin-bottom: 15px;padding: 25px 10px 5px; } #div5 {z-index: 1;margin-top: 15px;padding: 5px 10px; } #div6 {z-index: 3;position: absolute;top: 20px;left: 180px;width: 150px;height: 125px;border: 1px dashed #009;padding-top: 125px;background-color: #ddf;text-align: center; } </style></head><body><br /><br /><div id="div1"><h1>Division Element #1</h1><code>position: relative;<br/>z-index: 5;</div><div id="div2"><h1>Division Element #2</h1><code>position: relative;<br/>z-index: 2;</div><div id="div3"><div id="div4"><h1>Division Element #4</h1><code>position: relative;<br/>z-index: 6;</div><h1>Division Element #3</h1><code>position: absolute;<br/>z-index: 4;<div id="div5"><h1>Division Element #5</h1><code>position: relative;<br/>z-index: 1;</div><div id="div6"><h1>Division Element #6</h1><code>position: absolute;<br/>z-index: 3;</div></div></body></html> 復(fù)制代碼堆疊上下文如何影響堆疊？
上述關(guān)于層次的繪制規(guī)則遞歸地適用于任何層疊上下文。
<!DOCTYPE html> <html> <head><style type="text/css">div { font: 12px Arial; }span.bold { font-weight: bold; }div.lev1 {width: 250px;height: 70px;position: relative;border: 2px outset #669966;background-color: #ccffcc;padding-left: 5px; }#container1 {z-index: 1;position: absolute;top: 30px;left: 75px; }div.lev2 {opacity: 0.9;width: 200px;height: 60px;position: relative;border: 2px outset #990000;background-color: #ffdddd;padding-left: 5px; }#container2 {z-index: 1;position: absolute;top: 20px;left: 110px; }div.lev3 {z-index: 10;width: 100px;position: relative;border: 2px outset #000099;background-color: #ddddff;padding-left: 5px; } </style></head><body><br /><div class="lev1"> <span class="bold">LEVEL #1</span><div id="container1"><div class="lev2"><br/><span class="bold">LEVEL #2</span><br/>z-index: 1;<div id="container2"><div class="lev3"><span class="bold">LEVEL #3</span></div><div class="lev3"><span class="bold">LEVEL #3</span></div><div class="lev3"><span class="bold">LEVEL #3</span></div><div class="lev3"><span class="bold">LEVEL #3</span></div><div class="lev3"><span class="bold">LEVEL #3</span></div><div class="lev3"><span class="bold">LEVEL #3</span></div><div class="lev3"><span class="bold">LEVEL #3</span></div><div class="lev3"><span class="bold">LEVEL #3</span></div><div class="lev3"><span class="bold">LEVEL #3</span></div><div class="lev3"><span class="bold">LEVEL #3</span></div><div class="lev3"><span class="bold">LEVEL #3</span></div></div></div><div class="lev2"><br/><span class="bold">LEVEL #2</span><br/>z-index: 1;</div></div> </div><div class="lev1"> <span class="bold">LEVEL #1</span> </div><div class="lev1"> <span class="bold">LEVEL #1</span> </div><div class="lev1"> <span class="bold">LEVEL #1</span> </div></body></html> 復(fù)制代碼最佳實(shí)踐（不犯二準(zhǔn)則）
對(duì)于非浮層元素，避免設(shè)置 z-index 值，z-index 值沒(méi)有任何道理需要超過(guò)2，原因是：
CSS世界
考核（荔枝FM面試題）
寫(xiě)出6個(gè)div元素的堆疊順序，最上面的在第一個(gè)位置，例如: .one .two .three .four .five .six（z-index）；
html:
<div class="one"><div class="two"></div><div class="three"></div> </div> <div class="four"><div class="five"></div><div class="six"></div> </div> 復(fù)制代碼css:
.one {position: relative;z-index: 2;.two {z-index: 6;}.three {position: absolute;z-index: 5;} } .four {position: absolute;z-index: 1;.five {}.six {position: absolute;top: 0;left: 0;z-index: -1;} } 復(fù)制代碼答案：
.three .two .one .five .six .four 復(fù)制代碼參考：
《CSS世界》
Understanding CSS z-index： developer.mozilla.org/zh-CN/docs/…
CSS2.2，Layered presentation： www.w3.org/TR/CSS22/vi…
z-index： developer.mozilla.org/en-US/docs/…
Elaborate description of Stacking Contexts： www.w3.org/TR/CSS22/zi…
How z-index Works： bitsofco.de/how-z-index…
What No One Told You About Z-Index： philipwalton.com/articles/wh…
What You May Not Know About the Z-Index Property： webdesign.tutsplus.com/articles/wh…
Z-Index And The CSS Stack: Which Element Displays First?： vanseodesign.com/css/css-sta…
社區(qū)以及公眾號(hào)發(fā)布的文章，100%保證是我們的原創(chuàng)文章，如果有錯(cuò)誤，歡迎大家指正。文章首發(fā)在WebJ2EE公眾號(hào)上，歡迎大家關(guān)注一波，讓我們大家一起學(xué)前端~~~
再來(lái)一波號(hào)外，我們成立WebJ2EE公眾號(hào)前端吹水群，大家不管是看文章還是在工作中前端方面有任何問(wèn)題，我們都可以在群內(nèi)互相探討，希望能夠用我們的經(jīng)驗(yàn)幫更多的小伙伴解決工作和學(xué)習(xí)上的困惑,歡迎加入。
總結(jié)
以上是生活随笔為你收集整理的CSS：你真的会用 z-index 吗？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： cmd连接mysql连接：mysql-h
- 下一篇： CSS Box模型