diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 8c445779..c765a34a 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -108,6 +108,9 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
{ text: 'display', link: 'css相关/display' },
{ text: 'position', link: 'css相关/position' },
{ text: 'BFC', link: 'css相关/BFC' },
+ { text: '隐藏元素的方法', link: 'css相关/隐藏元素的方法' },
+ { text: 'display、visibility、opacity区别', link: 'css相关/display、visibility、opacity区别' },
+ { text: 'display、float、position的关系', link: 'css相关/display、float、position的关系'}
]
},
{
diff --git "a/docs/guide/css\347\233\270\345\205\263/display\343\200\201float\343\200\201position\347\232\204\345\205\263\347\263\273.md" "b/docs/guide/css\347\233\270\345\205\263/display\343\200\201float\343\200\201position\347\232\204\345\205\263\347\263\273.md"
new file mode 100644
index 00000000..4e3f24a8
--- /dev/null
+++ "b/docs/guide/css\347\233\270\345\205\263/display\343\200\201float\343\200\201position\347\232\204\345\205\263\347\263\273.md"
@@ -0,0 +1,45 @@
+# display、float、position的关系
+
+- 如果元素的 display 为 none 直接隐藏
+- 如果元素的 position 为 absolute 或者 fixed 时，float 失效，display 会提升块级元素
+- 如果元素的 position 为 relative, 会在浮动后的元素进行定位，display 会被提升成块级元素
+- 如果是根元素，display 会被提升为块级元素
+- 浮动元素会将 display 提升为块级元素
+
+
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git "a/docs/guide/css\347\233\270\345\205\263/display\343\200\201visibility\343\200\201opacity\345\214\272\345\210\253.md" "b/docs/guide/css\347\233\270\345\205\263/display\343\200\201visibility\343\200\201opacity\345\214\272\345\210\253.md"
new file mode 100644
index 00000000..4a543e39
--- /dev/null
+++ "b/docs/guide/css\347\233\270\345\205\263/display\343\200\201visibility\343\200\201opacity\345\214\272\345\210\253.md"
@@ -0,0 +1,22 @@
+# display、visibility、opacity区别
+
+- 占据空间
+ - opacity、visibility 占据空间，不会引起回流，但是会重绘
+ - display 不占据空间，但会引起页面的回流和重绘
+
+- 绑定事件
+ - display、visibility 不会触发绑定事件
+ - opacity 会触发绑定事件
+
+
+# display: none 和 visibility: hidden 的区别
+
+- 从渲染树上看
+ - display: none 不存在渲染树中
+ - visibility: hidden 的元素存在渲染树中，还会占据空间
+- 从继承上看
+ - display 不会被继承
+ - visibility 会被继承
+- 从渲染上看
+ - display 会影响回流重绘
+ - visibility 只会引起重绘
\ No newline at end of file
diff --git "a/docs/guide/css\347\233\270\345\205\263/\351\232\220\350\227\217\345\205\203\347\264\240\347\232\204\346\226\271\346\263\225.md" "b/docs/guide/css\347\233\270\345\205\263/\351\232\220\350\227\217\345\205\203\347\264\240\347\232\204\346\226\271\346\263\225.md"
new file mode 100644
index 00000000..dcbbac8b
--- /dev/null
+++ "b/docs/guide/css\347\233\270\345\205\263/\351\232\220\350\227\217\345\205\203\347\264\240\347\232\204\346\226\271\346\263\225.md"
@@ -0,0 +1,8 @@
+# 隐藏元素的方法
+
+- 1. display: none - 不会显示在渲染树上，不占据空间，无法监听事件
+- 2. visibility: hidden - 占据空间，无法监听事件
+- 3. opacity: 0 - 占据空间，可以监听事件
+- 4. transform: scale(0, 0)
+- 5. 绝对定位
+- 6. z-index 为负数
\ No newline at end of file