diff --git "a/\344\275\231\344\270\275/20241021-css\345\256\232\344\275\215.md" "b/\344\275\231\344\270\275/20241021-css\345\256\232\344\275\215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..fb6daa2bbe1680e61f96dbbded177deb9f200fa9
--- /dev/null
+++ "b/\344\275\231\344\270\275/20241021-css\345\256\232\344\275\215.md"
@@ -0,0 +1,203 @@
+# 定位
+1.CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
+
+ position: absolute;
+
+ position: relative;
+
+ position: fixed;
+
+2.相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）
+
+3.background-position:向右偏移量 向下偏移量;
+
+4.position: relative;/*相对定位：相对于自己原来的位置*/
+
+left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
+
+top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
+
+5.相对定位的用途：
+* （1）微调元素
+* （2）做绝对定位的参考，子绝父相
+
+6.相对定位的定位值：（负数表示相反的方向）
+* left：盒子右移
+
+* right：盒子左移
+
+* top：盒子下移
+
+* bottom：盒子上移
+
+## 绝对定位：
+1.绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示
+
+2.举例：
+* position: absolute; /*绝对定位*/
+* left: 10px; /*横坐标*/
+* top/bottom: 20px; /*纵坐标*/
+
+3.绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了
+
+
+4.如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。
+
+可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：
+```html
+div {
+ width: 600px;
+ height: 60px;
+ position: absolute; 绝对定位的盒子
+ left: 50%; 首先，让左边线居中
+ top: 0;
+ margin-left: -300px; 然后，向左移动宽度（600px）的一半
+ }
+```
+
+## z-index属性：
+1.z-index属性：表示谁压着谁。数值大的压盖住数值小的
+
+2.特性：
+* （1）属性值大的位于上层，属性值小的位于下层。
+
+* （2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
+
+* （3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
+
+* （4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。
+
+* （5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
+
+
+3.层级：
+* （1）必须有定位（除去static）
+
+* （2）用z-index来控制层级数。
+
+# 作业
+## 第一题：
+```html
+
+
+
+ 88888
+
+```
+## 第二题：
+```html
+
+
+
+ 88888
+
+
88888888888888888888888888888888888
+
88888888888888888888888888888888888
+
88888888888888888888888888888888888
+
88888888888888888888888888888888888
+
88888888888888888888888888888888888
+
+```
+
+## 第三题：
+```html
+ div {
+ position: relative;
+ }
+
+ div:hover:after {
+ position: absolute;
+ margin-left: 10px;
+ padding: 2px 10px;
+ box-shadow: 0 2px 9px #999;
+ background-color: #FFF;
+ border-radius: 4px;
+ color: #666;
+
+ content: attr(title);
+ z-index: 2;
+ line-height: 20px;
+ height: 20px;
+ }
+
+
+
+
+ 你吃饭了吗？
+
+```
+## 第五题：
+```html
+
+
+
+
+
+
+
+
+
广东深圳宝安区建安一路海雅缤纷城4楼
+