diff --git "a/\344\275\225\345\230\211\346\200\241/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\344\275\225\345\230\211\346\200\241/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..ae630f612f96d8359aa1b51f79562bfe096eb38b --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241021-\345\256\232\344\275\215\345\261\236\346\200\247.md" @@ -0,0 +1,99 @@ +### CSS属性：定位属性 +1. 绝对定位：`position: absolute;` +2. 相对定位：`position: relative;` +3. 固定定位：`position: fixed;` + +### 相对定位 +让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调） + +背景属性 +``` + background-position:向右偏移量 向下偏移量; +``` + +定位属性 +```css + position: relative;/*相对定位：相对于自己原来的位置*/ + left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/ + top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/ +``` + +### 相对定位不脱标 +相对定位不脱标，真实位置还在老家，别人不会把它的位置挤走。只不过影子出去了，可以到处飘 + +### 相对定位的用途 +如果想做“压盖”效果（把一个div放到另一个div之上），一般**不用**相对定位来做 + +相对定位的两个作用： +- 微调元素 +- 做绝对定位的参考，子绝父相 + +### 相对定位的定位值 + +- left：盒子右移 +- right：盒子左移 +- top：盒子下移 +- bottom：盒子上移 + +PS：负数表示相反的方向，`left: 200px`等价于`right: -200px` + +## 绝对定位 +定义横纵坐标，原点在父容器的左上角或左下角。`横坐标`用`left`表示，`纵坐标`用`top`或者`bottom`表示 +```css + position: absolute; /*绝对定位*/ + left: 10px; /*横坐标*/ + top/bottom: 20px; /*纵坐标*/ +``` + +### 绝对定位脱标 +绝对定位的盒子脱离了标准文档流。所有的标准文档流的性质，绝对定位之后都不遵守了 + +绝对定位之后，标签不区分行内元素、块级元素，可以直接设置宽、高 + +### 绝对定位的参考点（重要） +1. 如果用`top`描述，那么参考点就是`页面的左上角`，而不是浏览器的左上角 +2. 如果用`bottom`描述，那么参考点就是`浏览器首屏窗口尺寸`对应的页面的左下角： + +### 以盒子为参考点 +一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素为参考点 + +1. 要听`最近`的`已经定位`的祖先元素的 +2. 不一定是相对定位，任何定位都可以作为儿子的参考点————子绝父绝（页面不固定，无实战用途）、子绝父相（最常用，保证父亲没有脱标，儿子脱标在父亲的范围里面移动）、子绝父固 +3. 绝对定位的儿子，以父亲border的内侧为参考点，无视padding + +### 让绝对定位（position: absolute;）中的盒子在父亲里居中 +> left:50%; margin-left:负的宽度的一半 +> top:50%; margin-top:负的高度的一半 + +## 固定定位————相对浏览器窗口进行定位。无论页面如何滚动，盒子显示的位置不变 +**用途：** +1. 顶部导航条nav(假设顶部导航条的高度是60px，为防止其他内容被nav覆盖，要给body标签设置60px的padding-top) +2. 网页右下角的“返回到顶部” +```css + .backtop{ + position: fixed;/*固定定位*/ + bottom: 100px; + right: 30px; + width: 60px; + height: 60px; + text-align: center;/*文字居中*/ + line-height:30px; + text-decoration: none; /*去掉超链接的下划线*/ + } +``` + +### z-index属性：表示谁压着谁。数值大的压盖住数值小的 + +**特性：** + +1. 属性值大的位于上层，属性值小的位于下层 +2. z-index值没有单位，就是一个正整数。默认的z-index值是0 +3. 如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人`(后来居上)` +4. 定位了的元素，永远能够压住没有定位的元素 +5. 只有定位了的元素，才能有z-index值。不管相对定位、绝对定位、固定定位，都可以使用z-index值，而`浮动的元素不能用` +6. 从父现象：如果父亲1的z-index值 > 父亲2，即使儿子1 < 儿子2，儿子1也能在最上层(栓Q~,参考富二代) + +**层级：**当好几个已定位的标签出现覆盖的现象时，可以用z-index属性决定谁处于最上方 + +1. 必须有定位（除去static） +2. 用`z-index`来控制层级数。 diff --git "a/\344\275\225\345\230\211\346\200\241/20241023-\345\256\232\344\275\215\344\275\234\344\270\232/20241023-\345\256\232\344\275\215\344\275\234\344\270\232.html" "b/\344\275\225\345\230\211\346\200\241/20241023-\345\256\232\344\275\215\344\275\234\344\270\232/20241023-\345\256\232\344\275\215\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..5646737a3e4606112375c6cd317768984b41d97d --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241023-\345\256\232\344\275\215\344\275\234\344\270\232/20241023-\345\256\232\344\275\215\344\275\234\344\270\232.html" @@ -0,0 +1,126 @@ + + + + + + Document + + + + +
+
+
+
+
广东深圳宝安区建安一路海雅缤纷城4楼
+
+
+
+
【海雅缤纷城】万达影城（深圳海雅广场...
+
单人电影票，可观看2D
+
￥35
+
￥80
+
已售
+
225
+
+
+ + + \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241023-\347\273\223\346\236\204\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" "b/\344\275\225\345\230\211\346\200\241/20241023-\347\273\223\346\236\204\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..c1b113890922fc37b0d91bb70796799feb8123c2 --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241023-\347\273\223\346\236\204\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,49 @@ +## 结构伪类选择器 + +### 伪类选择器的标志性符号是 :。 + +CSS中有一些伪类选择器，比如:link、:visited、:hover、:active、:focus。 + +CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的结构伪类选择器：即通过结构来进行筛选。 + +E:first-child 匹配父元素的第一个子元素E。 +E:last-child 匹配父元素的最后一个子元素E。 +E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。 + *如果选择器写成li:nth-child(2)，则表示第2个 li。 + + 如果选择器写成li:nth-child(n)，则表示所有的li。因为此时的 n 表示 0,1,2,3,4,5,6,7,8.....（当n小于1时无效，因为n = 0 也是不会选中的） + + 如果选择器写成li:nth-child(2n)，则表示所有的第偶数个 li。 + + 如果选择器写成li:nth-child(2n+1)，则表示所有的第奇数个 li。 + + 如果选择器写成li:nth-child(-n+5)，则表示前5个 li。 + + 如果选择器写成li:nth-last-child(-n+5)，则表示最后5个 li。 + + 如果选择器写成li:nth-child(7n)，则表示选中7的倍数。。 +E:nth-child(odd) 匹配奇数 +E:nth-child(even) 匹配偶数 +E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。 + + +E:first-of-type 匹配同类型中的第一个同级兄弟元素E。 +E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。 +E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。 +E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。 + +E:empty 匹配没有任何子节点（包括空格等text节点）的元素E。 +E:target 匹配相关URL指向的E元素。要配合锚点使用。 + +![alt text](image.png) + +### 伪元素选择器 +E::before 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。 +E::after 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。 + +通过伪元素选择器，就可以添加出类似于span标签的效果（记得要结合 content 属性使用）。 +通过这两个属性添加的伪元素，是行内元素，需要转换成块元素才能设置宽高。 + +E::first-letter 设置元素 E 里面的第一个字符的样式。 +E::first-line 设置元素 E 里面的第一行的样式。 +E::selection 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。 \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.txt" new file mode 100644 index 0000000000000000000000000000000000000000..a64dc0a8d00b742b751687db35e77cdfda4deaa3 --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/1.txt" @@ -0,0 +1,67 @@ + + + + + + Document + + + + +
+
+ +
+
+ +
+
+
+ +
+
+
+ + + \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.txt" new file mode 100644 index 0000000000000000000000000000000000000000..dd8cb57e5a31aacae154ac02a545666ca5496524 --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/2.txt" @@ -0,0 +1,27 @@ + + + + + Document + + + +
+ 遥遥领先 +
+ + \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.txt" new file mode 100644 index 0000000000000000000000000000000000000000..79f3227d8e0dac98f2318faffae4cc59170fd5b0 --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/3.txt" @@ -0,0 +1,30 @@ + + + + + Document + + + +
+ + \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.txt" new file mode 100644 index 0000000000000000000000000000000000000000..3d8e2f60f9ec9d0e5f99cc8d34a39d857a6fe442 --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/4.txt" @@ -0,0 +1,78 @@ + + + + + Document + + + +
+ + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/5.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/5.txt" new file mode 100644 index 0000000000000000000000000000000000000000..5432c46621ce0fb4d44c3777e5f4a8a6152fd099 --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/5.txt" @@ -0,0 +1,47 @@ + + + + + + Document + + + + +
+
+
+
+ + + \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/6.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/6.txt" new file mode 100644 index 0000000000000000000000000000000000000000..c30b0e4289e74c5c05333f5576c7b18d9604080a --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/6.txt" @@ -0,0 +1,112 @@ + + + + + Document + + + +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/7.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/7.txt" new file mode 100644 index 0000000000000000000000000000000000000000..4829a149c8a79648d7910c74cebeaeadb69e1486 --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/7.txt" @@ -0,0 +1,101 @@ + + + + + + + + + + +
+
+
+ +
+
+
+ + + \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/8.txt" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/8.txt" new file mode 100644 index 0000000000000000000000000000000000000000..b16e7c83bcfaba413e71d6065d58d377a4cf0b65 --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\344\275\234\344\270\232/8.txt" @@ -0,0 +1,65 @@ + + + + + + + Document + + + + +
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md" "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md" new file mode 100644 index 0000000000000000000000000000000000000000..d6a0d68a0dd1662a07116217493ce386c469936b --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md" @@ -0,0 +1,82 @@ +# 动画详解 +### transition(过渡) +transition-property: all; 如果希望所有的属性都发生过渡，就使用all。 +transition-duration: 1s; 过渡的持续时间。 +transition-timing-function: linear; 运动曲线。属性值可以是： + +linear 线性 +ease 减速 +ease-in 加速 +ease-out 减速 +ease-in-out 先加速后减速 +transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。 + +上面的四个属性也可以写成综合属性： +transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间; +transition: all 3s linear 0s; +## 2D转换 +### 缩放：scale +格式： + + transform: scale(x, y); + + transform: scale(2, 0.5); +参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。 +取值：大于1表示放大，小于1表示缩小。不能为百分比。 +### 位移：translate +格式： + + transform: translate(水平位移, 垂直位移); + + transform: translate(-50%, -50%); +参数解释： + +参数为百分比，相对于自身移动。 + +正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。 +### 旋转：rotate +格式： + + transform: rotate(角度); + + transform: rotate(45deg); +参数解释：正值 顺时针；负值：逆时针。 +## 3D转换 +### 旋转：rotateX、rotateY、rotateZ +伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。 +格式： + + transform: rotateX(360deg); //绕 X 轴旋转360度 + + transform: rotateY(360deg); //绕 Y 轴旋转360度 + + transform: rotateZ(360deg); //绕 Z 轴旋转360度 +### 移动：translateX、translateY、translateZ +格式： + + transform: translateX(100px); //沿着 X 轴移动 + + transform: translateY(360px); //沿着 Y 轴移动 + + transform: translateZ(360px); //沿着 Z 轴移动 +### 透视：perspective +电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。 + +透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出 3d 效果，并不是正真的3d。 + +格式有两种写法： + +作为一个属性，设置给父元素，作用于所有3D转换的子元素 + +作为 transform 属性的一个值，做用于元素自身。 + +格式举例： +perspective: 500px; +## 定义动画： + @keyframes 动画名{ + from{ 初始状态 } + to{ 结束状态 } + } + + 调用： + animation: 动画名称 持续时间； diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\346\221\206\345\212\250\347\232\204\351\261\274\344\275\234\344\270\232/13.png" "b/\344\275\225\345\230\211\346\200\241/20241024-\346\221\206\345\212\250\347\232\204\351\261\274\344\275\234\344\270\232/13.png" new file mode 100644 index 0000000000000000000000000000000000000000..667e7fd5bd158f95ebfbce25fc5a866b3ad31704 Binary files /dev/null and "b/\344\275\225\345\230\211\346\200\241/20241024-\346\221\206\345\212\250\347\232\204\351\261\274\344\275\234\344\270\232/13.png" differ diff --git "a/\344\275\225\345\230\211\346\200\241/20241024-\346\221\206\345\212\250\347\232\204\351\261\274\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\257\246\350\247\243\346\221\206\345\212\250\347\232\204\351\261\274.html" "b/\344\275\225\345\230\211\346\200\241/20241024-\346\221\206\345\212\250\347\232\204\351\261\274\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\257\246\350\247\243\346\221\206\345\212\250\347\232\204\351\261\274.html" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\344\275\225\345\230\211\346\200\241/image.png" "b/\344\275\225\345\230\211\346\200\241/image.png" new file mode 100644 index 0000000000000000000000000000000000000000..9a431d8b19e0ec9b30b249f864c4b9cdfad79cc5 Binary files /dev/null and "b/\344\275\225\345\230\211\346\200\241/image.png" differ diff --git "a/\344\275\225\345\230\211\346\200\241/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" "b/\344\275\225\345\230\211\346\200\241/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" new file mode 100644 index 0000000000000000000000000000000000000000..ae630f612f96d8359aa1b51f79562bfe096eb38b --- /dev/null +++ "b/\344\275\225\345\230\211\346\200\241/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" @@ -0,0 +1,99 @@ +### CSS属性：定位属性 +1. 绝对定位：`position: absolute;` +2. 相对定位：`position: relative;` +3. 固定定位：`position: fixed;` + +### 相对定位 +让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调） + +背景属性 +``` + background-position:向右偏移量 向下偏移量; +``` + +定位属性 +```css + position: relative;/*相对定位：相对于自己原来的位置*/ + left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/ + top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/ +``` + +### 相对定位不脱标 +相对定位不脱标，真实位置还在老家，别人不会把它的位置挤走。只不过影子出去了，可以到处飘 + +### 相对定位的用途 +如果想做“压盖”效果（把一个div放到另一个div之上），一般**不用**相对定位来做 + +相对定位的两个作用： +- 微调元素 +- 做绝对定位的参考，子绝父相 + +### 相对定位的定位值 + +- left：盒子右移 +- right：盒子左移 +- top：盒子下移 +- bottom：盒子上移 + +PS：负数表示相反的方向，`left: 200px`等价于`right: -200px` + +## 绝对定位 +定义横纵坐标，原点在父容器的左上角或左下角。`横坐标`用`left`表示，`纵坐标`用`top`或者`bottom`表示 +```css + position: absolute; /*绝对定位*/ + left: 10px; /*横坐标*/ + top/bottom: 20px; /*纵坐标*/ +``` + +### 绝对定位脱标 +绝对定位的盒子脱离了标准文档流。所有的标准文档流的性质，绝对定位之后都不遵守了 + +绝对定位之后，标签不区分行内元素、块级元素，可以直接设置宽、高 + +### 绝对定位的参考点（重要） +1. 如果用`top`描述，那么参考点就是`页面的左上角`，而不是浏览器的左上角 +2. 如果用`bottom`描述，那么参考点就是`浏览器首屏窗口尺寸`对应的页面的左下角： + +### 以盒子为参考点 +一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素为参考点 + +1. 要听`最近`的`已经定位`的祖先元素的 +2. 不一定是相对定位，任何定位都可以作为儿子的参考点————子绝父绝（页面不固定，无实战用途）、子绝父相（最常用，保证父亲没有脱标，儿子脱标在父亲的范围里面移动）、子绝父固 +3. 绝对定位的儿子，以父亲border的内侧为参考点，无视padding + +### 让绝对定位（position: absolute;）中的盒子在父亲里居中 +> left:50%; margin-left:负的宽度的一半 +> top:50%; margin-top:负的高度的一半 + +## 固定定位————相对浏览器窗口进行定位。无论页面如何滚动，盒子显示的位置不变 +**用途：** +1. 顶部导航条nav(假设顶部导航条的高度是60px，为防止其他内容被nav覆盖，要给body标签设置60px的padding-top) +2. 网页右下角的“返回到顶部” +```css + .backtop{ + position: fixed;/*固定定位*/ + bottom: 100px; + right: 30px; + width: 60px; + height: 60px; + text-align: center;/*文字居中*/ + line-height:30px; + text-decoration: none; /*去掉超链接的下划线*/ + } +``` + +### z-index属性：表示谁压着谁。数值大的压盖住数值小的 + +**特性：** + +1. 属性值大的位于上层，属性值小的位于下层 +2. z-index值没有单位，就是一个正整数。默认的z-index值是0 +3. 如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人`(后来居上)` +4. 定位了的元素，永远能够压住没有定位的元素 +5. 只有定位了的元素，才能有z-index值。不管相对定位、绝对定位、固定定位，都可以使用z-index值，而`浮动的元素不能用` +6. 从父现象：如果父亲1的z-index值 > 父亲2，即使儿子1 < 儿子2，儿子1也能在最上层(栓Q~,参考富二代) + +**层级：**当好几个已定位的标签出现覆盖的现象时，可以用z-index属性决定谁处于最上方 + +1. 必须有定位（除去static） +2. 用`z-index`来控制层级数。