在做專案的時候，居然單擊後顯示的順序一直被別的li標籤壓著，最後終於找到了，是css的z-index屬性賦值了，值越大，顯示的層就越高
z-index是針對網頁顯示中的乙個特殊屬性。因為顯示器是顯示的圖案是乙個二維平面，擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示乙個元素在疊加順序上的上下立體關係。
z-index : auto | number
auto:預設值。
number: 無單位的整數值，可為負數 。
z-index值較大的元素將疊加在z-index值較小的元素之上。對於未指定此屬性的定位物件，z-index 值為正數的物件會在其之上，而 z-index 值為負數的物件在其之下。
這個屬性不會作用於視窗控制項，如 select 物件。
在ie5.5+中， iframe 物件開始支援此屬性。而在之前的瀏覽器版本中， iframe 物件是視窗控制項，會忽略此屬性。
z-index屬性適用於定位元素（position屬性值為 relative 或 absolute 或 fixed的物件），用來確定定位元素在垂直於顯示屏方向（稱為z軸）上的層疊順序（stack order）。
每乙個定位元素都歸屬於乙個stacking context。根元素形成root stacking context，而其他的stacking context則由定位元素產生（此定位元素的z-index被定義乙個非auto的z-index值），定位子元素會以這個local stacking context為參考，用相同的規則來決定層疊順序。並且stacking context和 containing block 之間並沒有必然聯絡。
當stacking context一樣的時候，就用z-index的值來決定怎樣顯示，如果z-index也相同（即stack level相同），則按照檔中後來者居上的原則（back-to-front ）的順序來層疊。
當任何乙個元素層疊另乙個包含在不同stacking context元素時，則會以stacking context的層疊級別（stack level）來決定顯示的先後情況。也就是說，在相同的stacking context下才會用z-index來決定先後，不同時則由stacking context的z-index來決定。例如：
定位元素a（z-index:100）裡面有定位元素a1（z-index:300），而定位元素b和元素a兄弟關係（z-index:200）。你會發現無論a1的z-index是多大，也會被z-index是200的b所覆蓋，因為a的z-index只有100。
CSS層疊樣式的主次順序
當使用了多個樣式表，樣式表需要爭奪特定選擇符的控制權。在這些情況下，總會有樣式表的規則能獲得控制權。以下的特性將決定互相對立的樣式表的結果。正如以前所提及的，網頁製作者和讀者都有能力去指定樣式表。當兩者的規則發生衝突，網頁製作者的規則會凌駕於讀者的其它相同權重的規則。而網頁製作者和讀者的樣式表都超越...
css層疊樣式
css 四大核心 一 選擇器 二 盒子模型 實現網頁布局 三 浮動四 四 定位 了解css 概念 層疊樣式表 級聯樣式表 cascading style s heet 作用 美化網頁 通過css的方式給html標籤設定樣式 css語法 選擇器 類選擇器 語法 1.定義型別.自定義型別名 2.呼叫型別...
css層疊樣式
層疊樣式表 層疊 相同的樣式的不同值作用到同一元素的時候,會有樣式被覆蓋.樣式生效會有先後重要的順序.根據樣式優先順序,如果優先順序一樣,後寫會覆蓋先寫的.樣式表 元素視覺表現的集合.例如我們看到的寬高背景顏色等等 樣式是依附html而存在的,如果沒有標籤,樣式將毫無意義.最小影響法則 當我們建立乙...