關於元素層級的一些介紹

說起瀏覽器中的元素層級，我們首先能想到的就是z-index，position(值非static)+z-index結合使用，即可控制元素在瀏覽器中的顯示層級。那除了這種方式外，還有其他什麼方式可以控制元素的層級呢？

7階層疊水平

任何元素都有層疊順序，當元素發生層疊時，層級高的會顯示在上面，覆蓋層級低的元素。當元素的層級相同時，則會根據dom的先後順序依次顯示。層疊優先順序如下圖所示。（網上找的）

也就是說，當元素發生層疊時，除了z-index設定層級外，display:inline-block > float:left > display:block 也可以控制元素的層級顯示。經過例子驗證，當元素有內容時，內容的層級會更高。

層疊上下文

官方解釋：層疊上下文是html元素的三維概念，這些html元素在一條假想的相對於面向視點或者網頁的使用者的z軸上延伸，html元素依據其自身屬性按照優先順序順序佔據著層疊上下文的空間。 頁面的根元素具有根層疊上下文。

當元素有層疊上下文時，其層級比普通元素（block元素，float元素等）要高。通過給元素設定如下屬性即可讓元素擁有層疊上下文環境。

1.定位元素中z-index不等於auto，為大於0的值

2.元素設定opacity為不等於1的值

3.元素的transform屬性不為none

4.will-change指定的屬性值為上面任意乙個

還有其他的方法，上面的四種是較常用的。給元素設定上面這些屬性後，即可提高元素的層級。提高的層級在z-index:0的位置。當元素都有較高的z-index值時，層疊順序按值的高低排列。當我們遇到元素層疊的現象時，找出元素是屬於哪個層級的，修改元素的屬性或者建立層疊上下文來調整元素的層級。

注意事項：

>層級上下文

title

>

<

style

>

body

.box

.wrap

.wrap-1

.wrap-2

.wrap-3

.wrap-4

.wrap-5

.wrap-6

.wrap-6-1

.wrap-6-1 .cnt

.wrap-6-2

.wrap-6-2 .cnt

style

>

head

>

<

body

>

<

div

class

="box"

>

<

h2>demo1：七個層級的元素

h2>

<

div

class

="wrap wrap-1"

>z-index:-1的層

div>

<

div

class

="wrap wrap-2"

>display:block的層

div>

<

div

class

="wrap wrap-3"

>float的層

div>

<

div

class

="wrap wrap-4"

>display:inline-block的層

div>

<

div

class

="wrap wrap-5"

>z-index:auto/0的層

div>

<

div

class

="wrap wrap-6"

>z-index > 0的層

div>

div>

<

div

class

="box"

>

<

h2>demo2：inline-block的元素層級比block要高

h2>

<

div

class

="wrap wrap-4"

>display:inline-block的層

div>

<

div

class

="wrap wrap-2"

>display:block的層

div>

div>

<

div

class

="box"

>

<

h2>demo3：使用opacity使元素擁有層疊上下文

h2>

<

div

class

="wrap wrap-4"

>display:inline-block的層

div>

<

div

class

="wrap wrap-2"

style

="opacity:0.8;"

>display:block的層

div>

div>

<

div

class

="box"

>

<

h2>demo4：使用transform使元素擁有層疊上下文

h2>

<

div

class

="wrap wrap-4"

>display:inline-block的層

div>

<

div

class

="wrap wrap-2"

style

="transform:rotate(3deg);"

>display:block的層

div>

div>

<

div

class

="box"

>

<

h2>demo5：不同父元素的子節點的層級比較

h2>

<

div

class

="wrap wrap-6 wrap-6-1"

>

<

div

class

="cnt"

>z-index:2,子元素z-index:2的層

div>

div>

<

div

class

="wrap wrap-6 wrap-6-2"

>

<

div

class

="cnt"

>z-index:1,子元素z-index:100的層<

div>

div>

div>

body

>

html

>

參考： 

關於apt cache 的一些介紹

apt cache是乙個apt軟體包管理工具，它可查詢apt的二進位制軟體包快取檔案。通過它我們可查詢軟體包的狀態資訊。apt cache show package name 顯示軟體的資訊，包括版本號，安裝狀態和包依賴關係等。apt cache search package name 搜尋軟體包，...

關於Log 的一些介紹

1 log.v 的除錯顏色為黑色的，任何訊息都會輸出，這裡的v代表verbose囉嗦的意思，平時使用就是log.v 2 log.d的輸出顏色是藍色的，僅輸出debug除錯的意思，但他會輸出上層的資訊，過濾起來可以通過ddms的logcat標籤來選擇.3 log.i的輸出為綠色，一般提示性的訊息inf...

關於Linux使用者的一些介紹

基本知識 linux會用一些使用者識別符號來表示沒乙個使用者，包括使用者的id和使用者所屬於的組。重要的有兩個id 使用者id uid 使用者組id gid id與賬號的對應關係在 etc passwd中。新增使用者 useradd 例 新增使用者test，終端輸入useradd test後，hom...