css：stacking context

最新推荐文章于 2021-02-25 18:24:07 发布

mkmin

最新推荐文章于 2021-02-25 18:24:07 发布

阅读量283

点赞数 1

分类专栏： css 文章标签： css3 stacking context position:fixed 层叠上下文

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/102660560

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

关于上方的文字的描述，我想起了大一的时候，一开始，老师给我们讲解定位的时候，说到了：‘’想象下，我们的页面是有很多层的，我们可以完整看到的，就是距离我们最近的那一层，接下来，第二层，第三层，第四层，一层一层的扣着‘’，这也可以解释下页面的排版问题

问题的思考，是来自position:fixed的定位点，大家的理解都是相对于视图，就整个屏幕，但是遗憾的是是针对的stacking context。也就是我们的标题，最简单的，比如下方的这个demo

<html>

	<body>
		<div class="container">
			<div class="flexddiv"></div>
		</div>
		</div>
	</body>

</html>
<style>
	.container {
		margin-left: 100px;
		margin-top: 100px;
		width: 200px;
		height: 200px;
		transform: rotateX(180deg);
		background-color: #000;
	}
	
	.flexddiv {
		width: 100px;
		height: 100px;
		position: fixed;
		background-color: red;
		left: 50px;
		top: 50px;
	}
</style>

效果图：

如今，至于为何会影响，是因为非none的transform，会创建一个stacking context。而我们用来position:fixed的元素正好在会创建stacking context的赏上下文中，所以就会自动脱出了

类似的，还有下面这几种情况

### z-index

不为auto的绝对(fixed)与相对(absolute)定位

### transform

属性值不为 "none"的元素

### opacity

生成新的stacking  context

### -webkit-overflow-scrolling：touch

生成新的stacking  context

### fiex-zindex

父元素为position：flex的时候，且子元素含有z-index，且子元素会创建一个stacking  context

因为详叙有点累赘，所以大家大概的看下下方mdn关于层叠上下文的介绍

或则可以查看张鑫旭-层叠上下文

参考资料：层叠上下文

mkmin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css：stacking context

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。关于上方的文字的描述，我想起了大一的时候，一开始，老师给我们讲解定位的时候，说到了：‘’想象下，我们的页面是有很多层的，我们可以完整看到的，就是距离我们最近的那一层，接下来，第二层，第三层，第四层，一层一层的扣着‘...
复制链接

扫一扫