add: stacking-context

Xxs-7 · Mar 29, 2024 · 684a571 · 684a571
1 parent 28ccc06
commit 684a571
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 16 deletions.
diff --git a/public/stacking-order.png b/public/stacking-order.png
diff --git a/src/config/dir.json b/src/config/dir.json
@@ -29,6 +29,10 @@
       {
         "path": "unit",
         "title": "布局单位"
+      },
+      {
+        "path": "stacking-context",
+        "title": "层叠上下文"
       }
     ]
   },

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -54,21 +54,6 @@ const MyDocument = () => {
               `,
           }}
         />
-        <script
-          async
-          src="https://www.googletagmanager.com/gtag/js?id=G-5PX24PZR11"
-        ></script>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              window.dataLayer = window.dataLayer || [];
-              function gtag(){dataLayer.push(arguments);}
-              gtag('js', new Date());
-
-              gtag('config', 'G-5PX24PZR11');
-            `,
-          }}
-        />
         <Main />
         <NextScript />
       </body>

diff --git a/src/posts/css/flex.mdx b/src/posts/css/flex.mdx
@@ -1,6 +1,7 @@
 ---
 title: 'flex 布局'
 date: '2022-01-01'
+tag: 'css'
 ---
 
 # flex 布局
@@ -160,7 +161,9 @@ align-items 属性是针对单独的每一个 flex 子项起作用，它的基
 `align-self`属性决定子元素自身在交叉轴的堆砌方式，它允许单个项目有与其他项目不一样的对齐方式，可覆盖 `align-items`属性。默认值为 `auto`，表示继承父元素的 `align-items`属性，如果没有父元素，则等同于 `stretch`。
 
 ```css
-align-self: auto | flex-start | flex-end | center | baseline | stretch;
+{
+  align-self: auto | flex-start | flex-end | center | baseline | stretch;
+}
 ```
 
 ## 案例分析

diff --git a/src/posts/css/stacking-context.mdx b/src/posts/css/stacking-context.mdx
@@ -0,0 +1,103 @@
+---
+title: '层叠上下文'
+date: '2022-01-01'
+---
+
+# 层叠上下文 stacking-context
+
+层叠上下文决定了页面上的 HTML 元素在 Z 轴（垂直方向）上的层叠顺序。也就是页面上的元素的层叠顺序 stacking-order（谁在上面，谁在下面）受到层叠上下文的控制。
+
+元素的层叠顺序以其最接近的形成层叠上下文的父级元素为基准。
+
+## 形成层叠上下文
+
+以下这些元素会形成层叠上下文：
+> - 根元素：
+>  文档的根元素 html。
+> - position：  
+>  值为 absolute 或者 relative ，并且 z-index 的值不为 auto 的元素。  
+>  值为 fixed 或 sticky的元素（sticky可用于所有移动浏览器，但不适用于较旧的桌面浏览器）
+> - 容器：
+>  元素是flex容器的子元素，并且其z-index的值不是auto。
+> 元素是grid容器的子元素，并且其z-index值不是auto。
+> - opacity：
+>  opacity的值小于的元素1。
+> 还有几种不常见的。
+
+## 层叠规则
+
+同一层叠上下文中，元素按照如下顺序堆叠（从底到顶顺序）：
+
+1. 形成层叠上下文的元素的背景和边界
+2. 普通流里的元素 (没有 position 或者 position:static;即 non-positioned) 按 HTML 中的出现顺序堆叠
+3. non-positioned 的浮动（floated）元素，
+4. 定位元素（positioned）
+5. 根据 z-index 属性值确定层叠顺序的非定位元素（position: static），在同一层叠上下文中，具有较高 z-index 值的元素会覆盖具有较低 z-index 值的元素。
+
+<img src="/stacking-order.png" className="flex items-center" />
+
+实际主要用到是非 index 元素的层叠顺序和 index 元素的层叠顺序
+
+## demo
+
+positioned, float, non-positioned 元素的层叠顺序对比：
+``` HTML
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      .container {
+        width: 200px;
+        height: 200px;
+        border: 1px solid black;
+      }
+      /* positoned 和 non-positioned */
+      .positoned {
+        width: 100px;
+        height: 100px;
+        position: relative;
+        right: -50px;
+        bottom: -50px;
+      }
+      .non-positioned {
+        width: 100px;
+        height: 100px;
+      }
+      /* float 和 non-positioned*/
+      .float {
+        width: 100px;
+        height: 100px;
+        float: left;
+      }
+
+      .red {
+        background-color: red;
+      }
+      .green {
+        background-color: green;
+      }
+      .blue {
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="positoned red">positoned</div>
+      <div class="non-positioned green">non-positioned</div>
+    </div>
+    <div class="container">
+      <div class="float blue">float</div>
+      <div class="non-positioned green">non-positioned</div>
+    </div>
+    <div class="container">
+      <div class="positoned red">positoned</div>
+      <div class="float blue">float</div>
+    </div>
+  </body>
+</html>
+
+```
diff --git a/src/posts/javascript/module.mdx b/src/posts/javascript/module.mdx
@@ -0,0 +1,6 @@
+---
+title: '模块规范'
+date: '2023-01-01'
+tag: 'module'
+---
+