1.为什么需要定位？
标准流或浮动无法实现随意布局的情况下需要定位来实现。
- 浮动可以让多个块级盒子一行没有缝隙的排列显示，经常用语横向排列盒子
- 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
2.定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了元素的最终位置。
2.1.定位模式
定位模式决定元素的定位方式，它通过css的position属性来设置，其值可以分为四个：
| 值 | 语义 |
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
2.2.边偏移
边偏移就是定位的盒子移动到最终位置。top、bottom、left4个属性
| 边偏移属性 | 示例 | 描述 |
| top | top：80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom：80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left：80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right：80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
3.静态定位static（了解）
静态定位是元素的默认定位方式，无定位的意思。
语法：
选择器{position：static；}
- 静态定位按照标准流特性摆放位置，没有边偏移
- 静态定位在布局时很少用到
4.相对定位relative ***
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
语法：
选择器{position：relatIve；}
相对定位的特点***：
- 它是相对于自己原来的位置移动的（移动位置的时候参照的是自己原来的位置）。
- 原来在标准流的位置继续占有，后面的盒子仍然以标准的方式对待他。（不脱标，继续保留原来的位置）
因此，相对定位并没有脱标，他最典型的应用是给绝对定位继续当爹的。。。
4.1.练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>相对定位</title>
<style>
* {
padding: 0;
margin: 0;
}
.box1 {
/* 相对定位是元素在移动位置的时候，是相对于它原来的位置说的；
不脱标，继续保留原来的位置
语法：选择器{position：relative；}
添加边偏移属性top、bottom、left、right，分开写，不能合并写*/
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: pink;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
5.绝对定位absolute***
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹性）。
语法：
选择器{position：absolute；}
绝对定位的特点***：
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置。（脱标）
5.1.练习
5.1.1.绝对定位-没有父级或者父级没有定位的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>绝对定位-没有父级或者父级没有定位的情况</title>
<style>
* {
padding: 0;
margin: 0;
}
/* <!-- 情况一：没有父级 --> */
/* .box1 {
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 200px;
background-color: red;
} */
/* <!-- 情况二：有父级，但是没有定位 --> */
.father {
width: 400px;
height: 400px;
background-color: aqua;
}
.son {
position: absolute;
top: 100px;
right: 100px;
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 绝对定位-没有父级或者父级没有定位的情况，以浏览器为准定位 -->
<!-- 情况一：没有父级 -->
<!-- <div class="box1"></div> -->
<!-- 情况二：有父级，但是没有定位 -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
5.1.2.绝对定位-父级有定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>绝对定位-父级有定位</title>
<style>
/* 情况一 */
/* .father {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
.son {
position: absolute;
top: 10px;
left: 30px;
width: 200px;
height: 200px;
background-color: aqua;
} */
/* 情况二 */
.yeye {
position: relative;
width: 700px;
height: 700px;
background-color: aqua;
padding: 10px;
}
.father {
width: 400px;
height: 400px;
background-color: bisque;
}
.son {
position: absolute;
bottom: 100px;
right: 30px;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!-- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考移动位置 -->
<!-- 情况一：父级有定位,以父级定位为参考点移动位置 -->
<!-- <div class="father">
<div class="son"></div>
</div> -->
<!-- 情况二：父级没有定位，父级的上级有定位，则以最近有定位的祖先元素为参考点移动位置 -->
<div class="yeye">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
5.1.3.绝对定位脱标不占有原来的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>绝对定位脱标不占有原来的位置</title>
<style>
.father {
width: 700px;
height: 700px;
background-color: antiquewhite;
}
.son1 {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: aqua;
}
.son2 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body></body>
<!-- 绝对定位不再占有原来的位置（脱标）
盒子son2给出绝对定位移动位置不再占有原来位置，son1标准流盒子占有son2原来的位置-->
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
</html>
6.子绝父相的由来
清楚这个口诀，就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”非常重要，是我们学习定位的口诀，是定位中常用的一种方式，这句话的意思是：子级是绝对定位的话，父级要用相对定位。
- 子绝父相定位，不会占有位置，可以放到父级盒子里面的任何一个地方，不会影响其他的兄弟盒子
- 父级盒子需要加定位限制子盒子在父盒子内显示。
- 父级盒子布局时，需要占有原有位置，因此父亲只能是相对定位。
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。
6.1.案例：学成在线-hot new模块添加
子绝父相练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>子绝父相练习</title>
<style>
body {
background-color: #f3f5f7;
}
.bd {
/* 子绝父相 */
position: relative;
width: 229px;
height: 270px;
background-color: #fff;
}
.hot {
width: 100%;
}
.bd .new {
/* 子绝父相 */
position: absolute;
top: 4px;
right: -4px;
}
h4 {
font-size: 14px;
color: #050505;
margin: 25px 20px 20px 25px;
}
.info {
margin-left: 25px;
font-size: 12px;
color: #999;
}
span {
color: #ff7c2d;
}
</style>
</head>
<body>
<div class="bd">
<img src="images/NEW.png" alt="" class="new" />
<img
src="D:\桌面\前端\css-第五天\study\images\tj2.png"
alt=""
class="hot"
/>
<h4>Android 网络图片加载框架详解</h4>
<div class="info"><span>高级</span> • 1125人在学习</div>
</div>
</body>
</html>
7.固定定位fixed***
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器{position：fixed；}
固定定位的特点***：
1.以浏览器的可视窗口为参照点移动元素
- 跟父级元素没有任何关系
- 不随滚动条滚动
2.固定定位不再占有原来的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位
固定定位小技巧：固定在版心右侧位置。
小算法：
- 让固定定位的盒子left：50%。走到浏览器可视区（也可以看做版心）的一般位置。
- 让固定定位的盒子margin-left：版心宽度的一半距离。多走版心的一半位置，就可以让固定定位的盒子贴着版心右侧对齐了。
7.1.练习
7.1.1.固定定位练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>固定定位</title>
<style>
div img{
/* 固定定位是元素固定于浏览器可视区的位置
主要场景：可以在浏览器页面滚动时元素的位置不会改变
语法：选择器{position：fixed；}
注意：
以浏览器的可视窗口为参照点移动元素跟父元素没有任何关系，不随滚动条滚动
固定定位不再占有原来的位置：
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对行为 */
position: fixed;
top: 165px;
left: 75px;
}
</style>
</head>
<body>
<div>
<img src="images/r_dj.png" alt="" />
<p>1、没有心，就不会受伤~ </p>
<p>2、让妲己看看你的心。 </p>
<p>3、请尽情吩咐妲己，主人!</p>
<p>4、努力做主人喜欢的事! 5、你的主人制造你时，好像有偷工减料耶~</p>
<p>6、尾巴，不只能用来挠痒痒哦~</p>
<p>7、妲己一直爱主人，因为被设定成这样~</p>
<p>9、主人的命令是绝对的。</p>
<p>10、羁绊是什么意思?</p>
<p>11、妲己陪你玩~</p>
<p>12、主人讨厌你了呢~</p>
<p>13、来和妲己玩耍吧!</p>
<p>14、主人的敌人，就是妲己的敌人!</p>
<p>15、哎~呀~</p>
<p>1、没有心，就不会受伤~ </p>
<p>2、让妲己看看你的心。 </p>
<p>3、请尽情吩咐妲己，主人!</p>
<p>4、努力做主人喜欢的事! 5、你的主人制造你时，好像有偷工减料耶~</p>
<p>6、尾巴，不只能用来挠痒痒哦~</p>
<p>7、妲己一直爱主人，因为被设定成这样~</p>
<p>9、主人的命令是绝对的。</p>
<p>10、羁绊是什么意思?</p>
<p>11、妲己陪你玩~</p>
<p>12、主人讨厌你了呢~</p>
<p>13、来和妲己玩耍吧!</p>
<p>14、主人的敌人，就是妲己的敌人!</p>
<p>15、哎~呀~</p><p>1、没有心，就不会受伤~ </p>
<p>2、让妲己看看你的心。 </p>
<p>3、请尽情吩咐妲己，主人!</p>
<p>4、努力做主人喜欢的事! 5、你的主人制造你时，好像有偷工减料耶~</p>
<p>6、尾巴，不只能用来挠痒痒哦~</p>
<p>7、妲己一直爱主人，因为被设定成这样~</p>
<p>9、主人的命令是绝对的。</p>
<p>10、羁绊是什么意思?</p>
<p>11、妲己陪你玩~</p>
<p>12、主人讨厌你了呢~</p>
<p>13、来和妲己玩耍吧!</p>
<p>14、主人的敌人，就是妲己的敌人!</p>
<p>15、哎~呀~</p><p>1、没有心，就不会受伤~ </p>
<p>2、让妲己看看你的心。 </p>
<p>3、请尽情吩咐妲己，主人!</p>
<p>4、努力做主人喜欢的事! 5、你的主人制造你时，好像有偷工减料耶~</p>
<p>6、尾巴，不只能用来挠痒痒哦~</p>
<p>7、妲己一直爱主人，因为被设定成这样~</p>
<p>9、主人的命令是绝对的。</p>
<p>10、羁绊是什么意思?</p>
<p>11、妲己陪你玩~</p>
<p>12、主人讨厌你了呢~</p>
<p>13、来和妲己玩耍吧!</p>
<p>14、主人的敌人，就是妲己的敌人!</p>
<p>15、哎~呀~</p><p>1、没有心，就不会受伤~ </p>
<p>2、让妲己看看你的心。 </p>
<p>3、请尽情吩咐妲己，主人!</p>
<p>4、努力做主人喜欢的事! 5、你的主人制造你时，好像有偷工减料耶~</p>
<p>6、尾巴，不只能用来挠痒痒哦~</p>
<p>7、妲己一直爱主人，因为被设定成这样~</p>
<p>9、主人的命令是绝对的。</p>
<p>10、羁绊是什么意思?</p>
<p>11、妲己陪你玩~</p>
<p>12、主人讨厌你了呢~</p>
<p>13、来和妲己玩耍吧!</p>
<p>14、主人的敌人，就是妲己的敌人!</p>
<p>15、哎~呀~</p>
</p>
</div>
</body>
</html>
7.1.2.固定定位小技巧-固定到版心右侧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>固定定位小技巧-固定到版心右侧</title>
<style>
.box {
position: fixed;
/* 1.让固定定位的盒子left：50%；，走到浏览器可视区的一半位置 */
left: 50%;
/* 2.让固定定位的盒子margin-left：版心宽度的一半距离
固定定位的盒子想不贴着版心， margin-left：版心宽度的一半距离可以多加一点，拉开距离*/
margin-left: 405px;
width: 100px;
height: 100px;
background-color: aqua;
}
.w {
width: 800px;
height: 2000px;
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="w"></div>
</body>
</html>
8.粘性定位sticky（了解）
粘性定位可以被认为是相抵定位和固定定位的混合。
语法：
选择器{position：sticky；top：10px；}
粘性定位的特点：
- 以浏览器的可视化窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必须添加top、left、right、bottom其中一个才有效
跟页面滚定搭配使用。兼容性较差。IE不支持。
8.1.练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>粘性定位</title>
<style>
body {
height: 3000px;
}
.nav {
/* 粘性定位可以被认为是相对定位和固定定位的混合；
以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对固定的特点）
必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用，兼容性较差，IE不支持
语法：选择器{position：sticky；边偏移属性：属性值；}*/
position: sticky;
top: 0;
height: 40px;
width: 800px;
background-color: aqua;
margin: 300px auto;
}
</style>
</head>
<body>
<div class="nav"></div>
</body>
</html>
9.定位的总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
| static静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative相对定位 | 否（占有位置） | 相对于自身位置移动 | 常用 |
| absolute绝对定位 | 是（不占有位置） | 带有定位的父级 | 常用 |
| fixed固定定位 | 是（不占有位置） | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否（占有位置） | 浏览器可视区 | 当前阶段少 |
- 一定记住 相对定位、固定定位、绝对定位两个打的特点：1.是否占原有位置（脱标否）；2.以谁为标准点移动位置
- 学习定位重点子绝父相。
10.定位叠放次序z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）。
语法：
选择器{z-index：1；}
- 数值可以是整数、负数或者0.默认值是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
10.1.练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位叠放次序</title>
<style>
.box {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.xiongda {
/* 使用了css三大特性中的层叠性就近原则 */
top: 100px;
left: 100px;
background-color: pink;
/* 使用定位布局时，可能出现盒子重叠的情况，此时可以使用z-index来控制盒子的前后次序（z轴）
语法：选择器{z-index：属性值；}
数值可以是整数、负数或者0，默认是auto，数值越大，盒子约靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性 */
z-index: 2;
}
.xionger {
background-color: red;
z-index: 1;
}
.guangtouqiang {
top: 150px;
left: 150px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 调用类选择器box -->
<div class="box xiongda">熊大</div>
<div class="box xionger">熊二</div>
<div class="box guangtouqiang">光头强</div>
</body>
</html>
11.定位拓展
11.1.绝对定位的盒子居中
加了绝对定位的盒子不能通过margin：0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。
- left：50%；：让盒子的左侧移动到父级元素的水平中心位置
- margin-left：-100px；：让盒子向左移动自身宽度的一半。
11.1.1.定位拓展-绝对定位的盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位拓展-绝对定位的盒子居中</title>
<style>
div {
/* 加了绝对定位的盒子不能通过margin：0 auto水平居中
但是可以通过以下计算方法实现水平和垂直居中 */
position: absolute;
/* 1.让盒子的左侧移动到父级元素的水平中心位置，left：50%； */
left: 50%;
/* 2.让盒子向左移动自身宽度的一半（负值），margin-left：50%； */
margin-left: -100px;
/* 1.让盒子的上面移动到父级元素的垂直中心位置，top：50%； */
top: 50%;
/* 2.让盒子向上移动自身高度的一半（负值），margin-top：50%； */
margin-top: -100px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
11.2.定位特殊特性
绝对定位和固定定位也和浮动类似。
- 行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
11.3.练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位拓展-定位特殊特性</title>
<style>
/* 行内元素设置高度和宽度是无效的。
添加绝对或者固定定位后，可以直接设置高度和宽度 */
span {
position: absolute;
top: 300px;
width: 300px;
height: 300px;
background-color: pink;
}
/* 块级元素本身自己独占一行
添加绝对或者固定定位后，如果不设置高度和宽度，默认大小是内容的大小 */
.dock {
position: fixed;
background-color: red;
}
</style>
</head>
<body>
<span>行内元素</span>
<div class="dock">块级元素1</div>
<div class="dock">块级元素2</div>
</body>
</html>
11.3.脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。
11.4.绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住他下面的标准流盒子，但是不会压住下面标准流盒子里面的文字（图片）,但是绝对定位（固定定位）会压住下面标准流所有的内容
浮动之所以不会压住文字，因为浮动产生的目的最初 是为了做文字环绕效果的。文字会围绕浮动元素。
11.4.1练习
1.定位拓展-绝对定位（固定定位）会完全压住盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位拓展-绝对定位（固定定位）会完全压住盒子</title>
<style>
div {
/* 1.浮动元素只会压住下面标准流的盒子，但是不会压住下面标准流开盒子里面的文字（图片） */
/* float: left; */
/* 2.绝对定位（固定定位）会压住下面标准流所有的内容 */
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<p>定位拓展-绝对定位（固定定位）会完全压住盒子</p>
</body>
</html>
2.拓展-浮动之所以不会压住文字（图片）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 浮动之所以不会压住文字（图片），因为浮动产生的目的最初是为了做文字环绕的效果，
文字会围绕浮动元素不被压住 */
img {
float: left;
}
</style>
</head>
<body>
<p>
开栏的话
今年我国就业工作总体开局平稳，成绩来之不易。同时要看到，受国内外多重因素影响，就业面临的风险挑战明显增多。人社部门如何加快推进相关政策落地见效，帮助企业解决困难、促进就业；各类就业服务机构如何发挥自身优势，不断提高服务质量和水平；各类企业如何履行社会责任，努力稳定和扩大就业岗位……本版今起推出“千方百计稳定和扩大就业”系列报道，呈现各地各部门为稳就业保就业采取的政策措施，敬请关注。
稳就业事关广大家庭生计，是经济运行在合理区间的关键支撑。今年一季度，我国就业形势总体保持基本稳定，但3月份以来，受国内外多重因素影响，就业面临的风险挑战明显增多。
“面对复杂严峻的就业形势，全国人社系统将把稳就业作为当前的首要任务，加大就业优先政策实施力度，努力保持就业大局稳定，更好服务于经济社会发展。”人社部有关负责人说。
接下来，人社部将出台哪些稳就业举措？如何推动、确保相关政策落地落实？记者进行了采访。
打好政策“组合拳” “降缓返补”助企业
日前，洋紫荆油墨（中山）有限公司领取到了2021年失业保险稳岗返还资金5万元，惠及400名员工。“稳岗返还资金有利于我们提高员工福利，在特殊时期稳岗稳队伍。”公司负责人黄嘉敏说。
量大面广的中小微企业和个体工商户是稳经济的重要基础、稳就业的主力支撑。当前，受国内外多重因素影响，相关市场主体困难明显增多。为此，人社部推出一系列阶段性、组合式稳岗位、提技能、防失业的政策措施，切实助企纾困稳岗位。
人社部有关负责人介绍，人社部将推出社保“降、缓、返、补”四个方面的支持举措，助力企业爬坡过坎。
降，即延续降低费率。将阶段性降低失业保险、工伤保险费率政策延续实施至2023年4月30日。
缓，即加大缓缴社保费力度。对受疫情影响经营困难的所有中小微企业、个体工商户，实施暂缓缴纳养老、失业、工伤保险费政策。其中，养老保险费缓缴期限3个月，失业保险和工伤保险费缓缴期限不超过1年，缓缴期间免收滞纳金。
返，即提高稳岗返还标准。将中小微企业、个体工商户失业保险稳岗返还比例最高提至90%。对没有对公账户的小微企业，可将资金直接返还至当地税务部门提供的其缴纳社会保险费的账户。
补，即加大就业补贴实施力度。对企业吸纳重点群体就业给予社保补贴、见习补贴等；对受疫情影响暂时无法正常生产经营的中小微企业发放一次性留工培训补助。
越是困难时刻，越要尽快把帮扶政策送到企业手上。眼下，各地人社部门正用足用好组合政策，推行“免申即享”经办模式，让企业便捷享受政策红利。
广东深圳市第一时间将中小微企业失业保险稳岗返还比例提至90%，预计惠及企业超80万家。当地人社局正在抓紧时间进行数据比对，完成后将主动发放稳岗返还资金。
广西崇左提前谋划，通过信息系统初步筛查符合条件的企业2507家，拟返还补贴资金2631.37万元，惠及职工超5.58
万人。 就业服务搬上网 招聘用工有保障
企业是吸纳就业的主渠道。做好企业招聘用工服务，对支持企业生产经营、保持就业局势稳定具有重要作用。近日，各地方、各部门都有针对性地加强和改进就业服务。
一方面，通过常态化举办线上招聘活动，开设大型专项招聘活动线上专场专区，推广运用直播带岗、远程面试等新型招聘对接模式，实现线上招聘活动不停歇。
山东龙口市开展“人社干部联百企”活动，自3月初建立《企业用工引才需求台账》以来，累计在网上发布岗位信息3240条；
<img src="images/p.jpeg" alt="" />
甘肃庆阳市的人社干部化身“网络主播”进行“直播带岗”“直播宣策”，推送就业岗位，解读就业帮扶政策，服务对象覆盖高校毕业生、农民工、退役军人等。
在国家层面，人社部将继续开展百日千万网络招聘专项行动。5月16日至8月25日，针对重点人群就业和用人单位招聘需要，搭建全国统一、多方联动的网络招聘平台，以优质高效服务助推稳就业、保就业。
另一方面，在做好疫情防控前提下，各地也因地制宜开展各类线下招聘活动，针对性举办小规模、定制化招聘会，实现“周周有活动、日日有服务”。
4月中旬，湖南常德石门县组织开展了为期3天的“送岗下乡”专场招聘会，招聘会服务对象为返乡农民工、留乡劳动力。一共带来了2000个就业岗位，累计进场求职人员1200多人，达成就业意向约190人。
与此同时，为了进一步筑牢民生底线，对就业困难人员的重点帮扶力度不减。各地将城镇零就业家庭成员、就业困难人员以及残疾登记失业人员、脱贫人口和农村低收入人口等重点人群列入就业帮扶对象，通过同步开展精准匹配就业、靶向扶持创业、公岗安置托底等措施，促进重点群体人岗匹配。
公共服务进校园 就业选择更多元
今年，我国有1076万高校毕业生走出校门找工作。做好高校毕业生就业工作，不仅事关千家万户，也有利于人力资源的利用。
今年3月以来，人社部启动公共就业服务进校园活动。各地汇集专业资源，凝聚各方力量，推动公共就业服务向前延伸、提质增效。
创新方式加大政策宣传。人社部数据显示，福建、江西、四川、贵州等省份已举办政策宣讲748场次。湖北制作发布“高校毕业生就业创业政策地图”小程序，总访问量超过20万人次。浙江杭州市在主要商务区利用160余块户外电子大屏幕滚动宣传就业政策，动员全市企业提供岗位。
招聘服务搭建对接平台。江西、山东、安徽、湖南、重庆、甘肃等地举办了实施公共服务进校园系列专场招聘活动，已组织各类线上线下招聘600余场次，发布岗位80余万个。陕西联合市场机构为毕业生和用人单位搭建远程视频面试，已有19万毕业生通过平台获得服务。湖北采取“小规模、多场次”方式，进校园开展“才聚荆楚”招聘活动，提供近1.5万个就业岗位。
培训指导提升就业能力。黑龙江、广西等地积极与高校合作，共建高校就业创业服务站、校园职业成长导师站；浙江杭州市推出“导师面对面”等咨询服务，为毕业生免费提供择业指导、创业咨询、心理疏导等服务；河南、贵州等地明确了今年高校毕业生技能培训目标，启动新兴产业、智能制造、现代服务业等专项培训。
“由政府牵头，把学校、科研机构、企业等各方资源进行整合，多方合力，给我们提供了更多元的就业选择。”2022年应届毕业生崔宇杰说。
不仅是人社部门，各部门都在为稳定高校毕业生就业贡献力量。
工信部联合教育部启动2022年全国中小企业网上百日招聘高校毕业生活动，直接将“专精特新”中小企业硕、博巡回招聘开进校园。
国有企业扩大招聘规模。“我们不仅扩大招聘，还为毕业生准备了人才公寓，免费提供一年的住宿，一年之后发放租房补贴，连续发放3年。”中国重型汽车集团有限公司组织与人力资源部副部长刘秉阳说。
“我们将持续完善毕业生市场化就业的政策措施，稳定公共部门招聘规模，适当扩大升学入伍、基层项目、科研助理等规模，努力创造更多适合毕业生的优质岗位。”人社部有关负责人说。
（人民日报记者 李心萍）
</p>
</body>
</html>
12.综合练习-淘宝焦点图布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>淘宝综合练习</title>
<style>
* {
padding: 0;
margin: 0;
}
.w {
width: 1190px;
margin: 100px auto;
/* background-color: aqua; */
}
li {
list-style: none;
}
.tb-promo {
/* 子绝父相 */
position: relative;
width: 564px;
height: 315px;
background-color: pink;
}
/* 子选择器 */
.tb-promo > img {
width: 100%;
height: 100%;
border-radius: 12px;
}
/* 大量代码相同时，可以取出相同代码放在并集选择其中，代码简介不繁琐 */
.prev,
.next {
position: absolute;
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
line-height: 30px;
text-align: center;
text-decoration: none;
}
.prev {
top: 50%;
margin-top: -15px;
left: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next {
top: 50%;
margin-top: -15px;
right: 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 7px;
}
.promo-nav li {
float: left;
width: 8px;
height: 8px;
margin: 3px;
border-radius: 50%;
background-color: #fff;
}
/* 别忘记权重问题，如果只写.selected权重小于.promo-nav li，颜色被覆盖 */
.promo-nav .selected {
background-color: #ff5000;
}
</style>
</head>
<body>
<!-- 添加版心 -->
<div class="w">
<div class="tb-promo w">
<img src="images/t1.png" alt="" />
<!-- 左侧箭头 -->
<a href="#" class="prev"> < </a>
<!-- 右侧箭头 -->
<a href="#" class="next"> > </a>
<ul class="promo-nav">
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
