①定位元素中z-index不等於auto，為大於0的值
②元素設定opacity為不等於1的值
③元素的transform屬性不為none
④will-change指定的屬性值為上面任意乙個（了解）
>層級上下文
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
>
view code
position 元素層級
1 position設定元素的定位方式 left right top bottom相當於座標點和參考點的關係 1 預設值為static 靜態 2 relative 相對定位 相對於自己的位置偏移 3 absolute 絕對定位 相對於非static最近的父級元素 一般來說是relative的 4 f...
頁面元素層級關係
具有定位的元素的層級,預設是後面的元素比前面的元素的層級高 這是對同級元素來說 標準流盒子低於浮動的盒子，浮動的盒子又低於定位的盒子。定位 relative,absolute,fixed 高於浮動，浮動高於標準流。給定z index的值為層級的值時。不給預設為0 層級為0的盒子，也比標準流和浮動高。...
opcity引發的元素層級變化
發現這個問題是在上定位了乙個刪除按鈕，當我用opcity屬性對進行透明化處理的時候，發現刪除按鈕不管用了，最後發現刪除按鈕是被覆蓋了，究其原因是因為opcity這個屬性造成的層級變化。我發現含有opcity屬性的元素層級會比其他元素的層級高，這時候z index是不起作用的，opcity會一直高於其...