CSS：你真的会用 z-index 吗？
生活随笔
收集整理的這篇文章主要介紹了
CSS：你真的会用 z-index 吗？
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
你真的會用 z-index 么？
如果你的 css 里面存在大量這樣的代碼：z-index：66、666、999、9999 可能你還不太理解 z-index 復制代碼HTML 元素是處于三維空間中
所有的盒模型元素都處于三維坐標系中，除了我們常用的橫坐標和縱坐標，盒模型元素還可以沿著“z 軸”層疊擺放，當他們相互覆蓋時，z 軸順序就變得十分重要。
但“z 軸”順序，不完全由 z-index 決定，在層疊比較復雜的 HTML 元素上使用 z-index 時，結果可能讓人覺得困惑，甚至不可思議。這是由復雜的元素排布規則導致的。
不含 z-index 元素如何堆疊？
當沒有元素包含z-index屬性時，元素按照如下順序堆疊（從底到頂順序）：
注意：普通流中的“無定位塊級元素”始終先于“定位元素”渲染，并出現在“定位元素”下層，即便它們在HTML結構中出現的位置晚于定位元素也是如此。
<!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> 復制代碼float 如何影響堆疊？
對于浮動的塊元素來說，層疊順序變得有些不同。浮動塊元素被放置于非定位塊元素與定位塊元素之間：
z-index 如何影響堆疊？
z-index 屬性指定了一個具有定位屬性的元素及其子代元素的 z-order。 當元素之間重疊的時候，z-order 決定哪一個元素覆蓋在其余元素的上方顯示。 通常來說 z-index 較大的元素會覆蓋較小的一個。
對于一個已經定位的元素（即position屬性值不是static的元素），z-index 屬性指定：
堆疊上下文（Stacking Context）
什么是堆疊上下文？
層疊上下文（Stacking Context）是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網頁的用戶的z軸上延伸，HTML元素依據其自身屬性按照優先級順序占用層疊上下文的空間。
在層疊上下文中，其子元素的 z-index 值只在父級層疊上下文中有意義。子級層疊上下文被自動視為父級層疊上下文的一個獨立單元。
- 層疊上下文可以包含在其他層疊上下文中，并且一起創建一個有層級的層疊上下文。
- 每個層疊上下文完全獨立于它的兄弟元素：當處理層疊時只考慮子元素。
- 每個層疊上下文是自包含的：當元素的內容發生層疊后，整個該元素將會 在父層疊上下文中 按順序進行層疊。
如何形成堆疊上下文？
- 根元素 (HTML)
- 定位元素（relative、absolute），并且 z-index 不為 auto；
- opacity 小于 1 時；
- transform 不為 none 時；
- z-index 不為 auto 的 flex-item；
注：層疊上下文的層級是 HTML 元素層級的一個層級，因為只有某些元素才會創建層疊上下文。可以這樣說，沒有創建自己的層疊上下文的元素 將被父層疊上下文包含。
<!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> 復制代碼堆疊上下文如何影響堆疊？
上述關于層次的繪制規則遞歸地適用于任何層疊上下文。
<!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> 復制代碼最佳實踐（不犯二準則）
對于非浮層元素，避免設置 z-index 值，z-index 值沒有任何道理需要超過2，原因是：
CSS世界
考核（荔枝FM面試題）
寫出6個div元素的堆疊順序，最上面的在第一個位置，例如: .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> 復制代碼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;} } 復制代碼答案：
.three .two .one .five .six .four 復制代碼參考：
《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…
社區以及公眾號發布的文章，100%保證是我們的原創文章，如果有錯誤，歡迎大家指正。文章首發在WebJ2EE公眾號上，歡迎大家關注一波，讓我們大家一起學前端~~~
再來一波號外，我們成立WebJ2EE公眾號前端吹水群，大家不管是看文章還是在工作中前端方面有任何問題，我們都可以在群內互相探討，希望能夠用我們的經驗幫更多的小伙伴解決工作和學習上的困惑,歡迎加入。
總結
以上是生活随笔為你收集整理的CSS：你真的会用 z-index 吗？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cmd连接mysql连接：mysql-h
- 下一篇： CSS 基本样式