z-index出发讨论层叠问题

最新推荐文章于 2022-04-10 10:20:16 发布

原创最新推荐文章于 2022-04-10 10:20:16 发布 · 518 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#z-index #css #层叠顺序 #层叠上下文

html css javascript 专栏收录该内容

13 篇文章

订阅专栏

本文详细解释了CSS中层叠上下文的概念，包括层叠水平、层叠准则及层叠上下文的创建途径等关键信息。

点击打开链接

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

<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

六：层叠顺序：

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