[DIV/CSS] 元素上下层叠关系总结

最新推荐文章于 2025-05-16 19:33:02 发布

浊酒映清泪

最新推荐文章于 2025-05-16 19:33:02 发布

阅读量4.7k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/hxm102581/article/details/51736008

本文详细总结了CSS中元素的上下层叠关系，包括z-index的使用、层叠上下文的创建以及元素默认的堆叠顺序，帮助读者深入理解CSS布局中的层次概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从浏览器渲染说起

一个页面的渲染，大致有下几个步骤

这里直接看最后一步Composite: 渲染层合并，这步是渲染最后一个步骤，作用就是把之前绘制的图层（如果有PS的经验的话图层很好理解）按照规定的顺序合并成一个图层，元素的层叠谁在上面谁在下面的关系，就在这步里被规定被最终在浏览器里体现出来了。

那么这个对层叠理解有什么用呢？。。。。。。。。。。并没什么卵用，只是最近看到了而已，科科，直接进入正题吧，个人总结，会比较乱。

开头挂两篇大神的文章保智商

鑫旭大神的深入理解CSS中的层叠上下文和层叠顺序

吹雪大大的不起眼的 z-index 却能牵扯出这么大的学问

其实看完上面两篇基本就够了，不过如果你实在闲的慌又想绕一下自己，好嘞，当我没说，请继续观赏

普通我上还是你上的几种体位

简单说几种常见情况：

文档中后来的居上

结构如下，这里默认box都有长宽和不同的背景颜色

<div class="you"></div>
<div class="me"></div>

复制代码http://m.ynmxzx.com/lb/xbzx/2016/0622/1043.html

很显然如果我有一个负值margin就会看到我上你下的情况

z-index正值>auto(0)>负值前面的居上

这里首先要明白的是z-index只针对position不是static的元素起作用。所以我们这里说起z-index，那这个元素一定是和position一起使用。而如果只指定position，那么该元素会默认z-index:auto, have a look

<div class="you"></div>
<div class="me"></div>
<style>
.you {
position: relative;
}
.me {
position: relaive;
z-index: -1;
margin-top: -10px;
}
</style>

复制代码http://m.ynmxzx.com/lb/xbzx/2016/0622/1044.html

嗯，这里就你上我下了

float的元素和position不为static的元素比普通文档流的居上

就不演示了！

好了，上面的四种情况算是最正常也是比较容易理解的情况了吧，那么问题就来了,如果我float了和你z-index: -1了发生重叠呢？如果你z-inidex: auto又或z-inidex: 1了呢？是不是要愣一下呢哈哈哈，不急，看个宝贝。

嗒哒，什么属性的元素有什么样的层叠等级，按照这张图上面的问题就简单了，float在负值z-index上，在auto或正值之下。咦？这里咋还有inline-block的事呢，还这么高等级捏？？这是因为内容要大于布局，不展开(顶部有鑫旭大神的文章，里面有做介绍)。

OK，我想是时候迎接这篇文章的高潮了，有孩子的抱稳了！上图中位于最底层的层叠上下文五个大字看到没有？目前我们都是把要比较元素放在以同一个层叠上下文为基底的环境内做比较，但是所有元素都会在这一个环境内吗？咳咳，我喝口水慢慢喷：

一个重要的概念——层叠上下文（stacking context）

不得不说这个词对于我这样的人从中文上理解简直是十脸懵逼

上下文？context？WTF？好吧，其实这东西是一个抽象的概念，如果让我来翻译它，我觉得比较合适的解释：创建层叠上下文的元素自己会成为一个参考对象。

既然是一个参考对象，那么谁来参考它呢？答案是它的子元素们（其实这并不是完全正确，但是可以先这么认为）。然后这个参考对象什么时候会被用到呢？

直接干巴巴的说个情景：

页面里你随便找两个元素(为了区分就是我和你吧)，如果我和你要比较谁更高人一等怎么办呢？

浏览器会做的就是不断向上检索祖辈元素，直到这个祖辈创建过层叠上下文(也就是这个祖辈可以当做参考对象)。
得到了两个元素各自的参考对象（这里称呼为我爸爸和你爸爸）然后呢，这时就分两种情况！分两种情况！分两种情况：

如果我爸爸和你爸爸是一个人！OK,这时我和你就是在一个层叠上下文中了，就可以按照上面盗来的层叠等级图进行谁上谁下的判断了

如果是不一样的呢？？？那事情就变得有趣多了——我和你就不!会!去!进!行!比!较!了!！。这场较量一下子会变成我爸爸和你爸爸间的战斗了（嘿，你崽子敢动我崽子。动你崽子咋滴啦，你不服咱两干啊。干！）
然后他们两就干起来了，他们两干的方式就和我和你一样，去找各自参考对象——得到我爷爷和你爷爷。然后来看是否同一个人，如果是的话我爸爸和你爸爸就是在一个层叠上下文中了，就会在爷爷辈这个参考对象上比出个高低，而这个高低！就是我和你的高低，换句话说就是高低由我和你的参考对象决定了。如果我爷爷和你爷爷还是不一样呢.....Go on

讲的有点绕是不是，没关系！再听我讲几句，你会更晕的

接下来说谁会是参考对象（创建了层叠上下文）

html天然就是，这就可以去把前面那些简单的例子套进来了，因为它们的参考对象都是html根元素了，所以可以直接在同一环境（上下文）比较。

position不为static且z-index不是auto的元素

display为flex且z-index不是auto的元素

opacity不等于1

transform不等于none

好了，到这个时候就该上例子了：

<html>
<div class="me">
<div class="you"></div>
</div>http://m.ynmxzx.com/lb/xbzx/2016/0622/1047.html
</html>
<style>
.me {
width: 100px;
height: 100px;
}
.you {
width: 100px;
height: 100px;
left: 50px;
position: relative;
z-index: -1;
}
</style>