在 CSS 中，position 是实现元素定位的一种重要方式。使用定位的元素层叠级别比浮动会更高，采用定位来控制元素位置会更加容易。
一般我们使用定位，是通过使用定位模式和边偏移量来确定元素位置的。
定位模式一共有如下：
偏移量就是 top right bottom left 的值，指定到上 右 下 左各基准边的值。
其中 inherit 指定元素从父元素继承 position 的值，存在兼容性的问题，在实际中并不使用。其他 position 值下面我们来逐个介绍并配上实例。
static 是默认的定位方式，如果元素不写 position 属性，那么其实就是 static 定位的，元素还是按原本的排列方式放置，并不具有特殊性。设置 top bottom left right 以及 z-index 是无效的。
relative 是相对定位，要注意是相对元素本该在的位置。也就是说，如果一个元素设置了相对定位，并设置了偏移值，那么这个偏移是相对它本该在的位置而言的。
查看如下的代码，盒子 one 和盒子 two 本来是一起竖直放置的：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
background-color: green;
}
.two {
background-color: indianred;
}
.one,
.two {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
效果如下：
但是如果我们给盒子 one 加上相对定位 position: relative; 和一个偏移量 top:50px; left:50px;
.one {
position: relative;
top: 50px;
left: 50px;
background-color: green;
}
那么效果将会是如下：
（图中的灰色的原本的绿色盒子 one 的位置）
可以看出，盒子 one 相对与原本没有定位时候的位置偏移了，偏移的量就是我们设置的距离左边 50px, 距离顶部 50px 。而且，下面的盒子 two 的位置并不影响，并不会去占据盒子 one 的位置。
所以相对定位的盒子的特性：
绝对定位是以最近的带有定位的上级元素来确定位置的。（这里的上级元素包括直接父级元素，爷爷级的元素或者更高层级的元素）
实例：
如下的盒子中，我们如果希望将黄色的盒子放在灰色线所在的位置，那么怎么做呢？
这是两个上面盒子的代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 200px;
height: 200px;
margin: 100px;
background-color: green;
}
.in {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="one">
<div class="in"></div>
</div>
</body>
</html>
如果你在里面的盒子 in 加上绝对定位，并给定偏移值，像这样：
.in {
position: absolute;
top:0px;
left: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
那么得到的结果其实是：
发现黄色盒子并不在绿色盒子里面，那么这是为什么呢，其实这是因为给了绝对定位的盒子会向上级元素查找，直到找到具有定位的父级元素来作为基准确定位置。如果一直没有找到。那么就会以浏览器 （Document ）来定位。
然而，我们应该以父级盒子 one 为基准进行定位，那么就应该给 one 一个定位，所以，我们还需要给 one 加上定位 posiion:relative;
至于为什么是给 relative，因为其他定位都可能产生副作用，relative 是最合适的。[ 这里父元素给 static 相当于没有定位，给 absolute 会继续向上找定位的父级，fixed 固定在窗口，其他定位特性更加不合适或者会影响本身]
.one {
position: relative;
width: 200px;
height: 200px;
margin: 100px;
background-color: green;
}
如此便可以实现：
当给一个元素添加绝对定位的时候，如果它后面还有其他非定位的元素，那么其他元素是会占据它的原本位置的，这一点是区别于相对定位的。而且，如果子元素需要相对直接父元素进行定位，那么最好给父元素一个 relative 定位。
相比之下，fixed 布局就要简单的多。我们常见的页面中，在滚动的时候，会有一部分是始终在窗口中的，比如网页广告，当你打开窗口，不论你怎么滚动，它就是始终都在某个角落固定。
它的定位基准其实就是浏览器窗口， 所以，其实可以看作是一种特殊的绝对定位。
「注意⚠️：Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。」
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p.fixed {
position: fixed;
top: 30px;
right: 5px;
}
</style>
</head>
<body>
<p class="fixed">这里被固定定位了，不随页面滚动</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>AAA</p>
<p>AAA</p>
<p>AAA</p>
...
</body>
</html>
粘性定位结合了 relative 和 fixed 的特性，可以说是根据用户的滚动在相对定位和固定定位之间切换。元素在滑动超出指定的偏移值之前是相对定位，在超出之后就成了固定定位了。
「注意⚠️：Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix」
比如，下面指定了 top 为 0。如果class="sticky"的 p 元素一直随着页面滑动，该 p 元素会到上面， top 成为负值。所以，在超出前，会跟着页面滑动，但在超出后，就成了 fixed 固定定位固定在页面顶端。这便是 sticky 定位。
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
padding: 5px;
background-color: orange;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>滚动页面</p>
<p class="sticky">注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div style="padding-bottom:1000px">
<p>滚动</p>
<p>来回滚动</p>
<p>滚动</p>
<p>来回滚动</p>
<p>滚动</p>
<p>来回滚动</p>
</div>
</body>
</html>
至此，CSS position 的内容就到这里了，其中 relative 和 absolute 是用的最多的定位方式，且实际有许多布局技巧，再做分享！