CSS 中的 position 属性用来设置元素在页面中的位置，通过该属性可以把任何属性放置在任何您认为合适的位置。position 属性有 5 个可选值，分别对应 5 种不同的定位方式，如下所示：
| 取值 | 说明 |
|---|---|
static | 默认值，静态定位，表示没有定位，元素会按照正常的位置显示，此时 top、bottom、left 和 right 4 个定位属性也不会被应用。 |
relative | 相对定位，即相对于元素的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。 |
absolute | 绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。 |
fixed | 固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。 |
sticky | 粘性定位，它是 relative 和 fixed 的结合体，能够实线类似吸附的效果，当滚动页面时它的效果与 relative 相同，当要滚动到屏幕之外时则会自动变成 fixed 的效果。 |
1. 静态定位：static
static 是 position 属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并且不会受到 top、bottom、left、right 和 z-index 属性的影响。
这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
border: 1px solid black;
}
div.static {
width: 130px;
height: 50px;
background-color: #ccc;
line-height: 50px;
text-align: center;
position: static;
top: 50px;
left: 20px;
}
</style>
</head>
<body>
<div>
<div class="static">postiont: static;</div>
</div>
</body>
</html>
运行结果如下图所示：
图：静态定位
2. 相对定位：relative
相对定位就是元素相对于自己默认的位置来进行位置上的调整，即定位基点是元素的默认位置。您可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量。
图：top、bottom、left、right 属性演示
【示例】下面通过代码来演示相对定位的使用：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
}
div.relative {
width: 140px;
height: 50px;
background-color: #b3ff99;
line-height: 50px;
text-align: center;
position: relative;
top: 25px;
left: 10px;
}
p {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 0;
}
</style>
</head>
<body>
<div>
<div class="relative">position: relative;</div>
<p></p>
</div>
</body>
</html>
运行结果如下图所示：
图：相对定位
注意：相对定位的元素可以移动并与其他元素重叠，但会保留元素默认位置处的空间。
3. 绝对定位：absolute
绝对定位就是元素相对于第一个非静态定位（static）的父级元素进行定位，即定位基点是父元素，如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。
您同样可以使用 top、bottom、left 和 right 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。
图：top、bottom、left、right 属性在绝对定位中的使用
使用绝对定位的元素会脱离原来的位置，不再占用网页上的空间。与相对定位相同，使用绝对定位的元素同样会与页面中的其它元素发生重叠，另外使用绝对定位的元素可以有外边距margin，并且外边距不会与其它元素的外边距发生重叠。
注意，
absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。
【示例】下面通过示例来演示绝对定位的使用：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
position: relative;
}
div.absolute {
width: 150px;
height: 50px;
background-color: #b3ff99;
line-height: 50px;
text-align: center;
position: absolute;
bottom: 10px;
right: 5px;
}
p {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 0;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<div class="absolute">position: absolute;</div>
<p><p></p>
</div>
</body>
</html>
运行结果如下图所示：
图：绝对定位
4. 固定定位：fixed
固定定位就是将元素相对于浏览器窗口进行定位，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。
【示例】下面通过示例来演示固定定位的使用：
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: pink;
/* overflow-y: scroll; */
width: 100px;
}
p {
width: 150px;
height: 50px;
background-color: #ccc;
margin: 0;
text-align: center;
line-height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div>
固定定位就是将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。
</div>
<p class="fixed">position: fixed;</p>
</body>
</html>
运行结果如下图所示：
图：固定定位
5. 粘性定位：sticky
粘性定位与前面介绍的四种定位方式不太一下，它像是相对定位和固定定位的结合体，当滚动页面时它的效果与相对定位相同，当元素滚动到一定程度时它又会呈现出固定定位的效果。
sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。
它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。
比如一些网页上的导航菜单，当页面加载完成时它在自己默认的位置，当我们向下滚动页面时它又会固定在页面的最顶端。
【示例】下面通过示例来演示粘性定位的使用：
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 500px;
position: relative;
}
p {
width: 100%;
height: 50px;
margin: 0;
text-align: center;
line-height: 50px;
background-color: #ccc;
}
p.sticky {
background-color: blue;
position: sticky;
top: 0px;
}
div.div2 p {
background-color: pink;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p class="sticky">position: sticky;</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
<div class="div2">
<p>2-1</p>
<p>2-2</p>
<p>2-3</p>
<p>2-4</p>
<p>2-5</p>
<p>2-6</p>
</div>
</body>
</html>
运行结果如下图所示：
图：粘性定位
在使用粘性定位时，需要注意以下几点：
- 在设置
position:sticky;时，必须再定义 top、bottom、right、left 四个属性之一，否则只会处于相对定位； - 使用
fixed固定定位元素的父元素不能定义overflow:hidden或者overflow:auto属性； - 父元素的高度不能低于
fixed固定定位元素的高度； fixed固定定位fixed的元素仅在其父元素内有效。
