CSS position 语法
在 CSS 中，position 属性用于实现元素的定位布局。
语法：
position: 关键字;说明：
position 的取值有 5 种，如下表所示。
| 取值 | 说明 |
|---|---|
| static（默认值） | 静态定位（正常文档流） |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
对于 position 属性，小伙伴们要清楚以下几点。
- top、right、bottom、left 属性只有在 position 值不是 static 时才生效。
- 如果给元素设置 position 为 absolute 或 fixed，此时该元素会变成一个 block 类型元素（即使元素本身是 inline 元素），并且忽略 display 属性的设置（除非设置为 display: none;）。
- 我们可以使用 z-index 属性来控制已定位元素在垂直方向上的堆叠顺序。
CSS position 摘要
| 属于 | CSS 定位 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | static |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS position 示例
接下来，我们通过几个简单的例子来讲解一下 position 属性是如何使用的。
示例 1：CSS 静态定位（position: static;）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
position: static;
width: 100px;
height: 100px;
background-color: hotpink;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</body>
</html>页面效果如下图所示。
分析：
由于 position 属性的默认值就是 static，对于上面例子来说，position: static; 这一句代码可以省略，此时效果效果是一样的。
示例 2：CSS 固定定位（position: fixed;）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
#first {
width: 150px;
height: 1500px;
border: 1px solid gray;
line-height: 1000px;
background-color: skyblue;
}
#second {
position: fixed; /* 设置元素为固定定位 */
top: 50px; /* 距离浏览器顶部50px */
left: 200px; /* 距离浏览器左部200px */
width: 100px;
height: 100px;
border: 1px solid silver;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="first">无定位的div元素</div>
<div id="second">固定定位的div元素</div>
</body>
</html>页面效果如下图所示。
分析：
我们尝试拖动浏览器的滚动条，其中有固定定位的 div 元素不会有任何位置改变，但没有定位的 div 元素会改变，如下图所示。
注意一下，我们在这里只使用了 top 和 left 属性来设置元素相对于浏览器顶边和左边的距离就可以准确定位该元素的位置了。top、bottom、left 和 right 这 4 个属性不必全部用到，小伙伴们稍微想一下就懂了。
示例 3：CSS 相对定位（position: relative;）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parent {
margin-top: 30px;
margin-left: 30px;
border: 1px solid silver;
background-color: skyblue;
}
#parent div {
width: 100px;
height: 60px;
margin: 10px;
background-color: hotpink;
border: 1px solid white;
}
#child2 {
/* 这里设置child2的定位方式 */
}
</style>
</head>
<body>
<div id="parent">
<div id="child1">第1个无定位的div元素</div>
<div id="child2">相对定位的div元素</div>
<div id="child3">第2个无定位的div元素</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
我们为第 2 个 div 元素加入相对定位，CSS 代码如下：
#child2 {
position: relative;
top: 20px;
left: 40px;
}再次运行后，页面效果如下图所示。
分析：
从这个例子可以看出，相对定位元素的 top 和 left 是相对于该元素原始位置而言的，这一点跟固定定位是不一样的。具体来说，top: 20px; 将元素向下移动 20 像素，而 left: 40px; 将元素向右移动 40 像素，移动的基准是元素未设置定位时的默认位置。
在 CSS 相对定位中，top、right、bottom、left 这 4 个属性，我们也是只需要其中两个属性就可以确定一个元素的相对位置。
示例 4：CSS 绝对定位（position: absolute;）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.parent {
position:relative;
width:160px;
height:20px;
background-color:lightskyblue;
}
.child {
position:absolute;
bottom:-20px;
left:70px;
width:20px;
height:20px;
background-color:hotpink;
}
</style>
</head>
<body>
<div class="parent">
<span class="child"></span>
</div>
</body>
</html>页面效果如下图所示。
分析：
使用上面这个技巧，我们可以把子元素随心所欲地相对父元素来定位。在这里我们注意一点，子元素没有使用 display: inline-block，但是却可以定义 width 和 height，为什么呢？其实这是因为 position: absolute 会将元素转换为 block 元素。这个也是绝对定位非常重要的一个特点。
注意: 浮动和定位都会将元素转换为 block 元素（除了静态定位）。
示例 5：CSS 粘性定位（position: sticky;）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
height: 200px;
line-height: 200px;
font-size: 30px;
text-align: center;
background-color: lightskyblue;
}
#sticky {
position: sticky;
top: 0;
background-color: hotpink;
padding: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<div>1</div>
<div id="sticky">sticky</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，所有 div 元素都在正常文档流中垂直放置着。当我们从上到下滚动页面时，sticky 元素起初会随着页面滚动。但是，当元素的顶部到达视口顶部时，它会 “粘” 在页面顶部（top: 0），不再随页面滚动。这就是 “粘性定位”。
