From 09304a2bc41c206fc121a5312d3c27b6b5236c5c Mon Sep 17 00:00:00 2001
From: jimmyxuexue <1002661758@qq.com>
Date: Tue, 31 Oct 2023 15:13:15 +0800
Subject: [PATCH] =?UTF-8?q?=20:memo:=20=E5=B1=82=E7=BA=A7=E9=97=AE?=
=?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...02\347\272\247\351\227\256\351\242\230.md" | 237 ++++++++++++++++++
1 file changed, 237 insertions(+)
create mode 100644 "docs/front-end-case/css\346\230\223\351\224\231\347\202\271/z-index\345\261\202\347\272\247\351\227\256\351\242\230.md"
diff --git "a/docs/front-end-case/css\346\230\223\351\224\231\347\202\271/z-index\345\261\202\347\272\247\351\227\256\351\242\230.md" "b/docs/front-end-case/css\346\230\223\351\224\231\347\202\271/z-index\345\261\202\347\272\247\351\227\256\351\242\230.md"
new file mode 100644
index 0000000..57f7db9
--- /dev/null
+++ "b/docs/front-end-case/css\346\230\223\351\224\231\347\202\271/z-index\345\261\202\347\272\247\351\227\256\351\242\230.md"
@@ -0,0 +1,237 @@
+# z-index 层级问题
+
+这篇文章用来记录一个比较常见的z-index的问题，不知道大家在开发过程中是否遇到过，一个定位元素，无论我z-index设置的最高，哪怕设置了1000000都无法出现在页面上（原因不是因为有别的值设置的比他高），这篇文章我们来完整的过一遍这块的知识！
+
+## 常规结构&层级
+
+看一段最简单的html结构代码：
+
+```html
+
+
+
+
+
+ 常规结构&层级
+
+
+
+
+
+
+
+
+```
+
+在这段代码中，a1和a2都设置了绝对定位，且它们都没有设置z-index调整层级，这时候他们会按照默认结构进行层级排序
+
+> html结构后面的层级会更高
+
+
+
+这个还是比较好理解的吧，如果我们想要让a1在a2的上面，只需要修改一下a1的 z-index 即可，如下：
+
+```html
+
+
+
+
+
+ 设置z-index
+
+
+
+
+
+
+
+```
+
+
+
+## 特殊结构
+
+下面我们来看一个特殊的场景，这个场景就是，无论我们怎么设置z-index都没有效果的场景：
+
+```html
+
+
+
+
+
+ 特殊代码结构
+
+
+
+
+
+
+
+```
+
+这段代码，a3是a2的一个子元素，我们即使给a3的z-index设置成100（最大），a3仍然位于a1（z-index = 10）的下面。效果如下：
+
+
+
+原因是因为我们a2依旧是低于a1的，所以即使a3比a1高，它依旧无法展示，所以得出结论：**z-index是受父级元素层级影响的**
+
+如果我们要实现层级结构为：a3>a1>a2，这时候就得修改代码的结构了：
+
+```html
+
+
+
+
+
+ 特殊代码结构
+
+
+
+
+
+
+
+
+```
+
+效果如下：
+
+
+
+到这里应该能够很清晰的理解这块的层级的逻辑了，不过我在调试的时候发现了一个非常诡异的问题，也没有理解，这里跟大家一起讨论一下：
+
+```html
+
+
+
+
+
+ 特殊代码结构
+
+
+
+
+
+
+
+```
+
+这里我们没有给a2设置层级，但是最终展示的效果又是a3>a1>a2如下这个效果：
+
+
+
+非常疑惑，我也很是不解，和前面我们的理解又有出入了。有知道的同学可以把原因说下大家一起讨论下~