定位Position

定位介绍

定位使我们能够覆盖基本文档流行为，以产生有趣的效果。

：position.
一共有五种不同的定位值：static，relative，fixed，absolute，sticky.

静态定位

静态定位是每个元素都会获得的默认位置-只是意味着“将元素放入文档布局流程中的正常位置-在这里看不到什么特别之处”。

静态定位的元素不受top，bottom，left和right属性的影响

静态定位是默认行为！始终根据页面的正常流进行定位

相对定位

相对定位的元素原本在标准文档流中的位置保留在原地，元素根据相对定位的偏移量在原来的位置基础上移动

设置相对放置的元素的top，right，bottom和left属性将导致其偏离其正常位置进行调整。 其他内容将不进行调整以适合元素留下的任何间隙。也就是说相对定位的元素在标准文档流中的位置一直保留着

相对定位是我们要研究的第一种位置类型。 这与静态定位非常相似，不同之处在于，一旦定位的元素在常规布局流程中占据了位置，则可以修改其最终位置，包括使其与页面上的其他元素重叠。

如果只是将被定位的元素设置为position:relative在此阶段保存并刷新，则根本看不到结果有任何变化。 那么如何修改元素的位置呢？ 您需要使用top，bottom，left和right属性，这些属性和relative一起使用

如果我们指定了顶部和左侧，为什么它会移到底部和右侧？ 最初听起来不合逻辑，但这只是相对定位起作用的方式-您需要考虑一种不可见的力，该力会推动已定位盒子的指定侧面，并朝相反方向移动。 因此，例如，如果指定top：30px ;，则用力推动框的顶部，使其向下移动30px。

绝对定位

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: A “positioned” element is one whose position is anything except static.（绝对定位的参考元素如果是定位的父元素，那么该元素的定位值不可以是默认的，如果是默认的，绝对定位将不参考该元素）

绝对定位的元素是相对于最近定位的祖先元素定位的（而不是相对于视口定位，不管他的父元素是什么定位值）。
绝对定位的元素会脱离标准文档流
常规文档布局流程中不再存在绝对定位的元素。 取而代之的是，它位于与其他所有内容分开的自己的图层上。 这非常有用：这意味着我们可以创建独立的UI功能，而不会干扰页面上其他元素的布局。 例如，弹出信息框和控制菜单；

当把一个绝对定位的元素的top，left,right,bottom,margin全部都设置为0的时候，该元素就会占满整个可视窗口
被绝对定位的元素仍然可以使用margin边距来影响自身的布局

图层

当元素开始重叠时，是什么决定哪些元素出现在其他元素之上？ 在到目前为止的示例中，由于定位元素胜过未定位元素，因此在定位上下文中我们只有一个定位元素，它出现在顶部。 当我们有一个以上的时候呢？

改变图层的堆叠顺序

网页也有一个z轴：一条假想的线，它从屏幕的表面一直延伸到您的脸部（或您希望在屏幕前面拥有的任何其他东西）。 z索引值会影响定位的元素在该轴上的位置； 正值将它们移到堆栈上方，负值将它们移到堆栈下方。 默认情况下，所有定位元素的z索引均为auto，实际上为0。

固定定位

固定定位和绝对定位很像，不过固定定位会在可视窗口中的某一个位置固定下来，而绝对定位不会固定在某一个位置

固定定位的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。
top，right，bottom和left属性用于定位元素。

A fixed element does not leave a gap in the page where it would normally have been located.（固定定位的元素会脱离原来的文档流，并且使用了定位的元素他的图层默认高于标准流）

粘性定位

粘性定位在滚动之前它是像相对定位一样，当滚动滚动条将该元素滚动到指定位置之后该元素就会固定下来，所以粘性定位有固定定位和相对定位的双重特性

粘性元素根据滚动位置在相对和固定之间切换
它将相对定位，直到在视口中遇到给定的偏移位置为止-然后将其“粘贴”在适当的位置

You must also specify at least one of top, right, bottom or left for sticky positioning to work.