发布日期：2021-05-07 01:27:33 浏览次数：25 分类：精选文章

本文共 1336 字，大约阅读时间需要 4 分钟。

看了网上很多的博客，将了关于这个层叠上下本的技术博客，然后我也自己去整理了下，我这篇关css元素的堆叠顺序写的很清楚，很有条理，很简单明了，层叠上下文的法则都总结好了，希望对大家有帮助

这个属于扩展，当然你想了解技术的话，可以看看我这个关于堆叠顺序的理解！不了解的话，当然有更加简单方法是完成堆叠上下本的方法！

~~当然这是我自然的理解，有说的不对的地方，希望你们可以指出来！大家一起交流学习，一起进步~~

堆叠上下文

堆叠(层叠)(栈)上下文(stack context)

它是一个区域,这个区域由某个元素去创建,它规定了这个区域中的内容

在Z轴上排列的先后顺序。

创建堆叠上下文的元素

1. html元素(根元素)2. 设置了z-index数值的定位元素(非auto)3. 一定是定位元素，也就是需要你去设置这个position属性4. 当然你也可以去mdn官方文档查看 层叠上下本 哪些元素可以去创建上下本

单个层叠上下本规则

## 同一个堆叠上下文中元素在Z轴上的排从后到前的排列顺序,也就是出现靠底层显示层次顺序1. 创建堆叠上下文的元素的背景跟边框2. 堆叠级别(z-index)为负值的堆叠上下文3. 常规流非定位的块盒4. 非定位的浮动盒子5. 常规流非定位行盒6. 任何 z-index 是 auto 的定位子元素7. 堆叠级别为正值的堆叠上下文---->>>每个堆叠上下文,独立于其他的堆叠上下文,它们之间不能相互穿插。你可以理解就是 把每个元素创建的堆叠上下文 看成一个整体。

接下来看下单个层叠上下文的例子

在这里插入图片描述

你可以通过调整每个盒子的margin-top属性的值,依次完成或者去理清楚这个覆盖的情况

单个堆叠上下本

Lorem ipsum dolor sit amet consectetur, adipisic

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, illo?

多个层叠上下文

在这里插入图片描述

代码

结语

以上的例子，希望大家对z-index属性有更加深入的理解，这个原理明白了，以后完成两张图片叠加或者说是这样子叠加，层叠的效果，就信手捏来！~~有问题的，或者哪里说得不对了，希望大家指出来~~

上一篇：Mybatis_映射文件

下一篇：CSS盒子坍塌（高度坍塌）（以及解决办法）

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！