diff --git "a/\347\216\213\351\235\226\350\214\271/20241018--CSS\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\347\216\213\351\235\226\350\214\271/20241018--CSS\345\256\232\344\275\215\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e358c1d6c6252e04e2f81a6cc057a7698ce3b667
--- /dev/null
+++ "b/\347\216\213\351\235\226\350\214\271/20241018--CSS\345\256\232\344\275\215\345\261\236\346\200\247.md"
@@ -0,0 +1,238 @@
+CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
+
+```
+	position: absolute;  <!-- 绝对定位 -->
+
+	position: relative;  <!-- 相对定位 -->
+
+	position: fixed;     <!-- 固定定位 -->
+
+```
+
+## 相对定位
+**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
+
+相对定位的举例：
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <meta name="Generator" content="EditPlus®">
+  <meta name="Author" content="">
+  <meta name="Keywords" content="">
+  <meta name="Description" content="">
+  <title>Document</title>
+
+	<style type="text/css">
+
+		body{
+			margin: 0px;
+		}
+
+		.div1{
+			width: 200px;
+			height: 200px;
+			border: 1px solid red;
+		}
+
+		.div2{
+			position: relative;/*相对定位：相对于自己原来的位置*/
+			left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
+			top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
+
+			width: 200px;
+			height: 200px;
+			border: 1px solid red;
+		}
+	</style>
+ </head>
+
+ <body>
+
+	<div class="div1">有生之年</div>
+	<div class="div2">狭路相逢</div>
+
+ </body>
+
+</html>
+```
+
+效果：
+
+![](http://img.smyhvae.com/2015-10-03-css-28.png)
+
+### 相对定位不脱标
+
+**相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。
+
+也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
+
+### 相对定位的用途
+
+如果想做“压盖”效果（把一个div放到另一个div之上），我们一般**不用**相对定位来做。相对定位，就两个作用：
+
+- （1）微调元素
+- （2）做绝对定位的参考，子绝父相
+
+### 相对定位的定位值
+
+- left：盒子右移
+
+- right：盒子左移
+
+- top：盒子下移
+
+- bottom：盒子上移
+
+PS：负数表示相反的方向。
+## 绝对定位
+
+**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
+
+格式举例如下：
+
+```
+	position: absolute;  /*绝对定位*/
+	left: 10px;  /*横坐标*/
+	top/bottom: 20px;  /*纵坐标*/
+```
+
+### 绝对定位脱标
+
+**绝对定位的盒子脱离了标准文档流。**
+
+所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
+
+绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。
+
+### 绝对定位的参考点（重要）
+
+（1）如果用**top描述**，那么参考点就是**页面的左上角**，而不是浏览器的左上角：
+
+![](http://img.smyhvae.com/20180115_2120.png)
+
+（2）如果用**bottom描述**，那么参考点就是**浏览器首屏窗口尺寸**（好好理解“首屏”二字），对应的页面的左下角：
+
+![](http://img.smyhvae.com/20180115_2121.png)
+
+为了理解“**首屏**”二字的含义，我们来看一下动态图：
+
+![](https://img.smyhvae.com/20180115_2200.gif)
+
+问题：
+
+![](http://img.smyhvae.com/20180115_2131.png)
+
+答案：
+
+用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。
+
+![](http://img.smyhvae.com/20180115_2132.png)
+
+### 以盒子为参考点
+
+一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
+
+如下：（子绝父相）
+
+![](http://img.smyhvae.com/20180115_2210.png)
+
+以下几点需要注意。
+
+（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
+
+```
+		<div class="box1">        相对定位
+			<div class="box2">    没有定位
+				<p></p>           绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
+			</div>
+		</div>
+
+```
+
+再比如：
+
+```
+		<div class="box1">        相对定位
+			<div class="box2">    相对定位
+				<p></p>           绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
+			</div>
+		</div>
+```
+
+（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
+
+子绝父绝、**子绝父相**、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
+
+**工程应用：**
+
+“**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：
+
+> 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
+
+（3）绝对定位的儿子，无视参考的那个盒子的padding：
+
+下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。此时，如果div相对定位，p绝对定位，那么，
+p将无视父亲的padding，在border内侧为参考点，进行定位：
+
+![](http://img.smyhvae.com/20180116_0812.png)
+### 让绝对定位中的盒子在父亲里居中
+
+我们知道，如果想让一个**标准流中的盒子在父亲里居中**（水平方向看），可以将其设置`margin: 0 auto`属性。
+
+可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：
+
+```
+	div {
+		width: 600px;
+		height: 60px;
+		position: absolute;  绝对定位的盒子
+		left: 50%;           首先，让左边线居中
+		top: 0;
+		margin-left: -300px;  然后，向左移动宽度（600px）的一半
+	}
+```
+
+如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。
+
+![](http://img.smyhvae.com/20180116_1356.png)
+
+我们可以总结成一个公式：
+
+> left:50%; margin-left:负的宽度的一半
+
+## 固定定位
+
+**固定定位**：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
+
+备注：IE6不兼容。
+
+**用途1**：网页右下角的“返回到顶部”
+
+**用途2：**顶部导航条
+### 5、z-index属性：
+
+**z-index**属性：表示谁压着谁。数值大的压盖住数值小的。
+
+有如下特性：
+
+ （1）属性值大的位于上层，属性值小的位于下层。
+
+ （2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
+
+ （3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
+
+ （4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。**而浮动的元素不能用**。
+
+ （5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
+
+z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是**层级**的应用。
+
+
+**层级：**
+
+（1）必须有定位（除去static）
+
+（2）用`z-index`来控制层级数。
diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241016\346\265\256\345\212\250.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241016\346\265\256\345\212\250.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4adea585a9d14b3bd85050235519a3559bf55ba8
--- /dev/null
+++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241016\346\265\256\345\212\250.html"
@@ -0,0 +1,113 @@
+<!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>
+       *{
+            margin: 0;
+            padding: 0;
+        }
+        .header{
+            width: 1000px;
+            height: 115px;
+            margin: 0 auto;
+        }
+        .header .d1{
+            width: 277px;
+            height: 103px;
+            background-color: red;
+            float: left;
+        }
+        .header .d2{
+            width: 137px;
+            height: 49px;
+            background-color: green;
+            float: right;
+            margin-bottom: 7px;
+        }
+        .header .d3{
+            width: 710px;
+            height: 46px;
+            background-color: green;
+            float: right;
+        }
+        .body{
+            margin: 0 auto;
+            width: 1200px;
+            height: 435px;
+        }
+        .body .d4{
+            width: 310px;
+            height: 435px;
+            background-color: rgb(235, 231, 36);
+            float: left;
+            margin-left: 100px;
+        }
+        .body .d5{
+            width: 450px;
+            height: 240px;
+            background-color: aqua;
+            float: left;
+            margin-left: 10px;
+        } 
+        .body .d6{
+            width: 450px;
+            height: 110px;
+            background-color: aqua;
+            float: left;
+            margin-left: 10px;
+            margin-top: 10px; 
+        }
+        .body .d7{
+            width: 450px;
+            height: 30px;
+            background-color: aqua;
+            float: left;
+            margin-left: 10px;
+            margin-top: 10px;
+        }
+        .body .d8{
+            width: 220px;
+            height: 400px;
+            background-color: purple;
+            float: left;
+            margin-top: -360px;
+            margin-left: 10px;
+        }
+        .body .d9{
+            width: 680px;
+            height: 25px;
+            background-color: blue;
+            float: left;
+            margin-left: 420px;
+            margin-top: -25px;
+        }
+        .bottom{
+            width: 1000px;
+            height: 50px;
+            background-color: orange;
+            margin-left: 195px;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="d1">logo</div>
+        <div class="d2">语言选择</div>
+        <div class="d3">导航条</div>
+     </div>
+     <div class="body">
+        <div class="d4">大广告</div>
+        <div class="d5"></div>
+        <div class="d6"></div>
+        <div class="d7"></div>
+        <div class="d8"></div>
+        <div class="d9"></div>
+     </div>
+     <div class="bottom"></div>
+   </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241018\345\256\232\344\275\215.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241018\345\256\232\344\275\215.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3727a1d95966a2fbf31b3b0027fc6989c053465e
--- /dev/null
+++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241018\345\256\232\344\275\215.html"
@@ -0,0 +1,30 @@
+<!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>
+        .d1{
+            height: 300px;
+            width: 500px;
+            border: solid 1px;
+            margin: auto;
+            position: relative;
+        }
+        .d2{
+            height: 50px;
+            width: 200px;
+            background-color: red;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">8888
+        <div class="d2"></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/3.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/3.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9c9af63f5fb9f0211acfb69085b965c2f7313220
--- /dev/null
+++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/3.html"
@@ -0,0 +1,25 @@
+<!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>
+         .d2{
+            height: 50px;
+            width: 200px;
+            color: white;
+            position: absolute;
+            top: 30px;
+        }
+        .d2:hover{
+            background-color: rgb(218, 56, 56);
+
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">点我</div>
+    <div class="d2">俺是文字提示</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/4.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/4.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6c40b9f6f70918e54b2aaf988fba844b65f74c32
--- /dev/null
+++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/4.html"
@@ -0,0 +1,60 @@
+<!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>
+        li {
+            list-style-type: none;
+        }
+        div {
+            width: 16px;
+            height: 21px;
+            background-image: url(./img/精灵图素材.png);
+            background-size: 43px 40px;
+            float: left;
+        }
+        .d1 {
+            background-position: 2px 2px;
+        }
+        .d2 {
+            background-position: -13px 2px;
+        }
+        .d3 {
+            background-position: 1px -18px;
+        }
+        .d4 {
+            background-position: -13px -18px;
+        }
+        .d5 {
+            background-position: -27px 2px;
+        }
+        .d6 {
+            background-position: -27px -18px;
+        }
+    </style>
+</head>
+<body>
+     <ul>
+        <li>
+            <div class="d1"></div>付款图标
+        </li>
+        <li>
+            <div class="d2"></div>存款图标
+        </li>
+        <li>
+            <div class="d3"></div>删除图标
+        </li>
+        <li>
+            <div class="d4"></div>粘贴图标
+        </li>
+        <li>
+            <div class="d5"></div>笑脸图标
+        </li>
+        <li>
+            <div class="d6"></div>编辑图标
+        </li>
+    </ul>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/5.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/5.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ad8ea9ca7c962c7b8fdfdc6ac167e7c4fae1efff
--- /dev/null
+++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/5.html"
@@ -0,0 +1,82 @@
+<!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>
+         .d1 {
+    margin: 20px;
+    width: 440px;
+    border: 1px solid orangered;
+    position: relative;
+    }
+    .d3 {
+        height: 50px;
+        width: 420px;
+        background-color: black;
+        color: #ccd3d7;
+        position: absolute;
+        top: 230px;
+        line-height: 50px;
+        padding-left: 20px;
+    }
+    .d4 {
+        padding: 10px;
+        line-height: 30px;
+    }
+    .d5 {
+        padding-left: 10px;
+    }
+    .d6 {
+        margin-top: 15px;
+    }
+    .a1 {
+        color: #ff7401;
+        font-size: 24px;
+        font-weight: bolder;
+        padding-top: 10px;
+    }
+    del {
+        color: gray;
+        margin-left: 10px;
+    }
+    .a2 {
+        margin-left: 239px;
+        color: gray;
+    }
+    .a3 {
+        color: red;
+    }
+    .d7 {
+        width: 52px;
+        height: 28px;
+        background-image: url(./img/万达影城素材1.png);
+        background-repeat: no-repeat;
+        position: absolute;
+        background-position: -108px 0px;
+        top: -9px;
+        left: 13px;
+    }
+    </style>
+</head>
+<body>
+    <div class="d1">
+        <div class="d7"></div>
+        <img src="./img/万达影城素材2.png" alt="">
+        <div class="d2">
+            <div class="d3">广东深圳宝安区建安一路海雅缤纷城4楼</div>
+        </div>
+        <div class="d4">
+            <h3>【海雅缤纷城】万达影城（深圳海雅广场）</h3>
+            <div class="d5">
+                单人电影票，可观看2D
+                <div class="d6">
+                    <a class="a1">￥35 </a> <del>￥80</del>
+                    <a class="a2">已售<a class="a3">225</a></a>
+                </div>
+            </div>
+        </div>
+        </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\256\232\344\275\2152.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\256\232\344\275\2152.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a7db12890598ed0d858843946e776defa6a6350f
--- /dev/null
+++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\256\232\344\275\2152.html"
@@ -0,0 +1,85 @@
+<!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>
+        *{
+            margin: 0;
+        }
+        .d1{
+            width: 2000px;
+            height: 50px;
+            background-color: rgb(204,204,204);
+            position: fixed;
+        }.d2{
+            width: 600px;
+            height: 2000px;
+            position: absolute;
+            left: 50px;
+            top: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">8888</div>
+    <div class="d2">
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+        333333333333333333333333333333333333333333333333333333333333
+    </div>
+</body>
+</html>
\ No newline at end of file
