diff --git "a/\345\206\234\344\273\225\351\271\217/20241021-\345\233\272\345\256\232\345\256\232\344\275\215,css3\351\200\211\346\213\251\345\231\250.md" "b/\345\206\234\344\273\225\351\271\217/20241021-\345\233\272\345\256\232\345\256\232\344\275\215,css3\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0732ae55909c021970c5f4719f3c40ee78678574
--- /dev/null
+++ "b/\345\206\234\344\273\225\351\271\217/20241021-\345\233\272\345\256\232\345\256\232\344\275\215,css3\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,133 @@
+# 定位属性（二）
+## 固定定位（position：fixed；）
+相对浏览器的的窗口进行定位，无论页面如何滚动，这个盒子的显示不变，一般用于创建导航栏、页脚、广告横幅等。
+
+*例：*
+```css
+.fixed-element {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 60px;
+  height: 60px;
+  background-color: red;
+}
+```
+## 粘性定位（position：sticky；）
+在页面滚动到特定位置之前表现的想相对定位的元素，但当页面滚动到某个点时，它就会像固定定位一样固定在屏幕上。这种定位方式非常适合创建在页面滚动时固定视图中的导航栏或侧边栏。
+
+*例：*
+```css
+.sticky-element {
+  position: sticky;
+  top: 0; /* 当页面滚动到元素顶部与视口顶部重合时，元素将固定在顶部 */
+  background-color: blue;
+  padding: 10px;
+  font-size: 20px;
+}
+```
+```html
+<div class="sticky-element">粘性定位元素</div>
+<p>一些文本内容...</p>
+<!-- 页面内容 -->
+<p>更多的文本内容...</p>
+```
+**注意**
+
+粘性定位的元素必须有一个相对于其长流位置的偏移量，这意味着它不能在没有top、right、bottom或left属性的情况下使用。此外，粘性定位元素的滚动行为是由其最近的已定位（非static）祖先元素决定的，如果没有这样的祖先元素，则由初始包含块决定
+
+## z-index 属性
+- `z-index` 是 CSS 中的一个属性，用于控制元素的堆叠顺序。在 CSS 中，元素可以重叠，`z-index` 属性决定了这些重叠元素的前后顺序。具有更高 z-index 值的元素将会覆盖具有较低 `z-index` 值的元素。
+
+- `z-index` 只在定位元素（即设置了 `position` 属性为 `relative`、`absolute`、`fixed` 或 `sticky` 的元素）上有效。对于没有定位的元素（即 `position` 属性为 `static` 的元素），`z-index` 是不起作用的。
+
+- `z-index` 可以取任何整数，包括负数。如果没有指定 `z-index` 值，元素将按照它们在 HTML 中出现的顺序堆叠，即后出现的元素会覆盖先出现的元素。
+
+*例：*
+```css
+.box1 {
+  position: relative;
+  background-color: red; 
+  width: 100px;
+  height: 100px;
+   z-index: 1;
+}
+.box2{
+background-color: blue;
+  position: absolute;
+  top: 20px;
+  left: 20px; 
+  z-index: 2;
+}
+/* 蓝色盒子在红色盒子上面 */
+```
+**注意：**
+
+- z-index 只影响定位元素的层叠上下文。
+- z-index 可以是任何整数，包括负值。
+- 如果两个定位元素的 z-index 相同，则它们覆盖的顺序将由它们在 HTML 文档中出现的顺序决定。
+- z-index 值仅在元素的层叠上下文中有效，这意味着 z-index 值只与父元素的 z-index 值有关。
+- 如果一个元素的父元素有 z-index 值，那么这个元素的 z-index 值是相对于父元素的 z-index 值来计算的。
+
+## css3属性选择器
+CSS3 的属性选择器是一种选择元素的方法，它允许你根据元素的属性及其值来选择它们。属性选择器的基本语法是使用方括号 `[]` 来包围属性名，如果需要匹配特定的属性值，则在方括号内加上等号 `=` 和相应的值。
+
+### 属性选择器主要有以下几种样式：
+
+1. **存在属性选择器**：
+   当你只想选择具有特定属性的元素，而不考虑属性值时，可以使用这种选择器。例如，选择所有具有 `type` 属性的 `<input>` 元素：
+   ```css
+   input[type] {
+     /* 样式规则 */
+   }
+   ```
+
+2. **完全匹配属性选择器**：
+   当你想选择属性值完全匹配特定值的元素时，可以使用等号 `=`。例如，选择所有 `type` 属性值为 `text` 的 `<input>` 元素：
+   ```css
+   input[type="text"] {
+     /* 样式规则 */
+   }
+   ```
+
+3. **部分匹配属性选择器**：
+   对于属性值由多个单词或字符组成的属性，你可以使用 `~=` 来选择属性值中包含特定值的元素。例如，选择所有 `class` 属性值中包含 `admin` 的元素：
+   ```css
+   [class~="admin"] {
+     /* 样式规则 */
+   }
+   ```
+
+4. **开始匹配属性选择器**：
+   使用 `^=` 来选择属性值以特定字符串开头的元素。例如，选择所有 `id` 属性值以 `header-` 开头的元素：
+   ```css
+   [id^="header-"] {
+     /* 样式规则 */
+   }
+   ```
+
+5. **结束匹配属性选择器**：
+   使用 `$=` 来选择属性值以特定字符串结尾的元素。例如，选择所有 `class` 属性值以 `-footer` 结尾的元素：
+   ```css
+   [class$="-footer"] {
+     /* 样式规则 */
+   }
+   ```
+
+6. **包含匹配属性选择器**：
+   使用 `*=` 来选择属性值中包含特定字符串的元素。例如，选择所有 `class` 属性值中包含 `highlight` 的元素：
+   ```css
+   [class*="highlight"] {
+     /* 样式规则 */
+   }
+   ```
+
+7. **多个值的属性选择器**：
+   当属性可以有多个值时，可以使用 `|=` 来选择属性值的完整单词与特定值匹配的元素。例如，选择所有 `lang` 属性值为 `en` 或以 `en-` 开头的元素：
+   ```css
+   [lang|="en"] {
+     /* 样式规则 */
+   }
+   ```
+
+属性选择器提供了一种非常强大的选择元素的方法，允许开发者根据元素的属性来应用样式，而不仅仅是根据元素的类型或类名。这使得CSS的选择器更加灵活和强大。