CSS position 属性定义文档中的元素在页面中的位置，position 属性常与 left、right、top、bottom 和 z-index 属性一起使用，以确定元素在页面上的最终位置。position 属性有五个可选值，分别是 static（默认值）、relative、absolute、fixed 和 sticky。
定位类型
position 属性有如下五个可选值：
static：静态定位，默认值，元素根据文档的正常流进行定位，通俗点讲，就是该在哪儿就在哪儿。top、right、bottom和left不会影响该属性值的元素。relative：相对定位，即相对于元素的正常（原来）位置进行定位，可以通过top、right、bottom和left这4个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。absolute：绝对定位，相对于第一个非static定位的父级元素进行定位，可以通过top、right、bottom和left这4个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素也不会对其它元素造成影响。fixed：固定定位，相对于浏览器的窗口进行定位，可以使用top、right、bottom和left这4个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口，元素的位置都是固定不变的。sticky：粘性定位，它是相对定位（relative）和固定定位（fixed）的结合体，能够实线类似吸附的效果，当滚动页面时，它的效果与relative相同，当要滚动到屏幕之外时，则会自动变成fixed的效果。
relative 相对定位
相对定位就是元素相对于自己默认的位置来进行位置上的调整，可以通过 top、right、bottom 和 left 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量。
<html>
<head>
</head>
<body>
<div style="border:1px solid black;height:300px;">
<div style="width:300px;height:100px;border:1px solid blue;">第一个元素正常位置</div>
<div style="width:300px;height:100px;border:1px dotted red;position:absolute;top:102px;">第二个元素原来的正常位置（模拟了一下）</div>
<div style="width:300px;height:100px;border:1px solid red;position:relative;top:50px;left:150px;">
第二个元素 position:relative 之后的位置</div>
</div>
</body>
</html>
第一个元素的正常位置
第二个元素原来的正常位置（模拟了一下）
第二个元素 position:relative 之后的位置
上述示例中的，内部第二个 div 是为了更形象的展示 relative 的变化，通过 absolute 模拟了一下，利用了 absolute 不影响正常文档流的特性，故实际可以去掉。
absolute 绝对定位
绝对定位就是元素相对于第一个非静态定位（static）的父级元素进行定位，如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。同样可以使用 top、right、bottom 和 left 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。
<html>
<head>
</head>
<body>
<div style="border:1px solid black;height:300px;position:relative;">
<div style="width:300px;height:100px;border:1px solid blue;">第一个元素正常位置</div>
<div style="width:300px;height:100px;border:1px solid red;position:absolute;top:150px;left:150px;">
第二个元素 position:absolute 针对父级非 static 元素</div>
</div>
</body>
</html>
第一个元素正常位置
第二个元素 position:absolute 针对父级非 static 元素
将最外部的 div 标签增加了 position:relative 用来模拟 absolute 定位。
fixed 固定定位
固定定位就是将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。
