上面的链接是我看的一篇博客,说的很好,这儿我再进行自我总结加深理解记忆。
<body>
<div id="one">
</div>
<div id="two">
</div>
</body>
<style>
body,html{
height: 100%;
}
#one{
width: 100%;
height: 100px;
background: red;
position: absolute;
}
#two{
width: 100%;
height: 50px;
background: yellow;
}
</style>
按照我之前的理解,由后来元素居上的原则,第二个div会在第一个之上,但实际上相反,而看了张鑫旭的博客后,发现“”有了定位效果的元素层级比较高”只是冰山一角。
一:我们希望的谁在谁之上的这种视觉效果:层别水平
二:层叠水平需要遵循层叠准则。
三:层叠准则:1:当具有明显层叠水平标志时,并且在同一个层叠上下文领域(后面会提),层叠水平大的会覆盖小的
2:若元素的层叠水平一样,遵循后来居上准则。
四:层叠上下文领域的层叠水平比普通元素高。
五:层叠上下文的创建途径:
(1)根层叠上下文:根页面元素自动创建
(2)对于有定位声明的元素其z-index不为auto时
(3)
z-index
值不为auto
的flex
项(父元素display:flex|inline-flex
).- 元素的
opacity
值不是1
. - 元素的
transform
值不是none
. - 元素
mix-blend-mode
值不是normal
. - 元素的
filter
值不是none
. - 元素的
isolation
值是isolate
. will-change
指定的属性值为上面任意一个。- 元素的
-webkit-overflow-scrolling
设为touch
六:层叠顺序:
.....感觉自己也没有完全理解,日后多学习....