您的位置：首页 > 其它

z-index出发讨论层叠问题

2016-10-16 11:22 141 查看

点击打开链接

上面的链接是我看的一篇博客，说的很好，这儿我再进行自我总结加深理解记忆。

<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

值不是

.
元素的

transform

值不是

none

.
元素

mix-blend-mode

值不是

normal

.
元素的

filter

值不是

none

.
元素的

isolation

值是

isolate

will-change

指定的属性值为上面任意一个。
元素的

-webkit-overflow-scrolling

设为

touch

六：层叠顺序：

.....感觉自己也没有完全理解，日后多学习....

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航