今天給大家分享一下，修真院官網前端任務4，深度思考中的知識點——z-index初解，工作原理
一，背景介紹
1.含義：z-index屬性指定了元素及其子元素的[z順序]，而[z順序]可以決定當元素 發生覆蓋的時候，哪個元素在上面。
通常乙個較大的z-index值的元素會覆蓋較低的那乙個（前提是元素支援z-index值）。
2. 2.z-index的值
z-index:auto;預設值
z-index：;整數值
z-index：inherit;繼承
3.基本特性
支援負值；
支援css3animation動畫；
在css2.1時代，需要和定位元素配合使用；
二.知識剖析
1.z-index一般只對定位元素有作用
如圖position：static是不起任何作用的
2.如果定位元素z-index沒有發生巢狀，則遵循兩個原則
後來居上準則：
html的dom流是分先後順序的，一般來講兩個元素他們的css特性基本沒什麼差別的時候，當發生重疊的時候，一般是由後面
乙個覆蓋前面乙個。
誰大誰上：
這個很好理解，誰的z-index值大，誰就在上面
3.如果定位元素z-index發生巢狀，也有乙個原則
祖先優先原則：
如圖，這裡的子元素z-index完全是看父級z-index的大小
三.常見問題
為什麼z-index為auto，祖先優先原則就不起作用了？
四.解決方案
官方文件規定當z-index為auto的時候，盒子不會建立乙個新的層疊上下文。
五.編碼實戰
六.拓展思考
理解元素的層疊順序
層疊順序-stacking-order
表示元素發生層疊的時候有著特定的垂直顯示順序。
著名的7階層疊水平
七.參考文獻
深入理解z-index
八.常見問題
1.問：為何需要層疊順序？
答：因為層疊順序的意義就是規範元素重疊時候的呈現規則
2.問：為何是這個層疊順序？
答：因為這種層疊順序更符合頁面載入的功能和視覺呈現！
3.問：內聯元素真的會覆蓋浮動元素？
答：如圖可以看到
修真院WEB小課堂 css有哪些選擇器
在html頁面中,如果我們想要去改變乙個元素的字型大小 尺寸 顏色 樣式等 就需要用到css選擇器來進行對修改元素一對一或者多對一的進行匹配並改變其樣式,這就是css選擇器。選擇器是一種模式，它能在頁面上匹配一些元素，使相關的宣告僅被應用到被選擇的元素上。1 命名 w3c css2.1的 4.1.3...
修真院web小課題 如何使用sass？
1.背景介紹 關於sass sass 的開發文件中如此描述自己 sass 是 css 的乙個擴充套件,它使 css 的使用起來更加優雅和強大。sass 的終極目標是解決 css 的缺陷。如我們所知，css 並不是乙個完美的語言。css 雖然簡單易學，卻也能迅速製造嚴重的混淆，尤其是在工程浩大的專案中...
修真院 BFC及其如何工作
目錄 1.背景介紹 2.知識剖析 3.常見問題 4.解決方案 5.編碼實戰 6.擴充套件思考 7.參考文獻 8.更多討論 一，背景介紹 什麼是fc？fc的全稱是 formatting contexts，是w3c css2.1規範中的乙個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子...