本人已参与新人「创作礼活动」，一起开启掘金创作之路。
一、position定位的5种方式
1.1 定位特点
特点1： relative、absolute、fixed、sticky这四种定位方式在没有设置 top、bottom、left 和 right 4 个定位属性时，元素默认仍旧待在它的原始位置；
特点2： sticky定位仅 top 属性起作用，设置left、right、bottom的左、右、下偏移量不会其任何作用；
特点3： sticky定位仅在父元素的content内容区，不会超出内容区范围进入padding或border区；
1.2 sticky失效的几种情况
情况1：必须设置 top 属性，否则其吸附效果失效，不设置 top 等同于relative；
情况2：最近的滚动父容器（nearest scrollport），最近的父容器的content高度须大于设定为 position: sticky的元素高度
情况3：overflow: hidden，设定为 position: sticky 的元素的任意父节点的 overflow 属性必须是 visible，否则不会生效
| 取值 | 说明 |
|---|---|
| static | 默认值，静态定位，设置 top、bottom、left 和 right 4 个定位属性也不会被应用 |
| relative | 相对定位，不脱离文档流，仍旧占用原始位置，通过 top、right、bottom、left 这 4 个属性来设置相对于原始位置的偏移量 |
| absolute | 绝对定位，脱离文档流，不再占用原始位置，通过 top、right、bottom、left 这 4 个属性来设置相对于非 static 定位的父级元素的偏移量 |
| fixed | 固定定位，脱离文档流，不再占用原始位置，相对于浏览器进行定位，通过 top、right、bottom、left 这 4 个属性来设置相对于浏览器窗口的偏移量。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。 |
| sticky | 粘性定位，是 relative 和 fixed 的结合体，能够实现吸附效果，仍旧占用原始位置，当滚动页面时它的效果与 relative 相同，当要滚动到距离最近的滚动容器，不一定是屏幕顶部指定位置时则会自动变成 fixed 的效果 |
应用示例
1.不设置 top、left 时，默认显示在原始位置
2. absolute结合margin的负外边距实现评注效果
3. sticky不设置 top ，粘性吸附效果不生效
- 不设置 top、left 时，默认显示在原始位置
<!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>
.box {
width: 600px;
height: 1300px;
border: 1px solid red;
padding: 20px 60px;
}
.child {
background-color: red;
position: absolute;
/* margin-left: -55px; */
width: 50px;
}
</style>
</head>
<body>
<div class="box">
<span>
测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测
测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测
试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测
试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测
</span>
<div class="des">
<span class="child">我是标题的评注</span>
<h3>我是标题</h3>
</div>
</div>
</body>
</html>
- absolute结合margin的负外边距实现评注效果
<!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>
.box {
width: 600px;
height: 1300px;
border: 1px solid red;
padding: 20px 60px;
}
.child {
width: 50px;
background-color: red;
position: absolute;
margin-left: -55px;
/* 应用负外边距，实现文章评注 */
}
</style>
</head>
<body>
<div class="box">
<span>
测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测
测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测
试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测
试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测
</span>
<div class="des">
<span class="child">我是标题的评注</span>
<h3>我是标题</h3>
</div>
</div>
</body>
</html>
- sticky失效场景
<!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>
.box {
width: 600px;
height: 400px;
border: 1px solid red;
padding: 20px 60px;
background-color: aqua;
background-clip: content-box;
/* 1. overflow: hidden; 将导致子孙所有sticky失效 */
}
.box .parent {
/* 2. height: fit-content; 父元素的content高度小于等于 sticky 元素的高度sticky将失效 */
height: 160px;
background-color: greenyellow;
/* 1. overflow: hidden; 将导致子孙所有sticky失效*/
}
.box .child {
background-color: red;
position: sticky;
top: 10px;
/* 3. 不设置top, sticky将失效；
仅top起作用，设置left、bottom、right不起任何作用 */
}
.footer {
height: 600px;
background-color: aquamarine;
color: red;
}
</style>
</head>
<body>
<div class="box">
<span>
测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测
测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测
试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测
试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测
试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测
试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测
试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测
试测试测测试测试测试测试测试测测试测试测试测
</span>
<span class="child">我是标题的评注</span>222
<div class="parent">
试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测试测试测测试测试测试测
<span class="child">我是标题的评注</span>
<span>我是标题</span>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
