css層疊規則

2022-06-14 20:24:18 字數 810 閱讀 2952

網頁上的元素其實是三維的,類似於高中學的左手座標系,z軸就是垂直於螢幕。層疊上下文跟「塊狀格式化上下文」(bfc)類似,只要元素擁有某些特定的css屬性,就會表現出層疊上下文的特點。

前提是重疊在一起,就會按照上圖的規則呈現。

(1) 誰大誰上:如生效的z-index屬性值,大的就覆蓋小的。

(2)後來居上:當元素的層疊順序一致的時候,比較後面的元素就會覆蓋前面的元素。

普通元素可以新增overflow:hidden;使他成為bfc元素。而層疊上下文也可以新增某些css屬性變成的。

根層疊上下文指的是頁面根元素。

對於position為relative/absolute/fixed的元素,當他的z-index不是auto時,就會建立層疊上下文。

css3新屬性

樓上很重要,很多細節。

1235543

.box 

.img

很明顯疊在背景上面,看樓上的圖,z-index的負值優先於層疊上下文的background/border,裡面的數字是匿名內聯盒子,由上表可知,內聯盒子優先順序高於z-index負值。

所以效果如下

看css世界,隱隱約約,懵懵懂懂,恍恍惚惚。

css 樣式層疊規則

檢視別人css,發現有一段css button.dark.blue button.dark 如果這樣寫,backgroud color到底是用誰的呢?原來我只知道內聯樣式的權值 id選擇器 類選擇器 標籤選擇器這樣的規則,還有就是越精細等級越高,看上面css 應該是第乙個優先順序更高吧 測試了一下,...

css層疊性規則

在css中,會根據選擇器的特殊性來決定所定義的樣式規則的次序,具有更特殊選擇器的規則優先於具有一般選擇器的規則。各種選擇器的特殊值 1 內聯樣式的特殊值 1 0 0 0 2 id選擇器的特殊值為 0 1 0 0 3 類選擇器 屬性選擇器 偽類的特殊值為 0 0 1 0 4 元素選擇器 偽元素的特殊值...

CSS學習之css層疊規則

這是針對多個規則中宣告衝突的情況,如果都是不同型別的宣告,那麼直接應用即可,無需比較選取 css層疊分為兩種情況 一,選中的 二,繼承的。選中的大於繼承的 15.1 選中的 1.權重以及 分為5個級別 從大到小 1.讀者的重要宣告 important 2.創作人員的重要宣告 3.創作人員的正常宣告 ...