本文详细解读position属性的五种定位方式（static、relative、absolute、fixed和sticky），包括它们的工作原理、使用示例及与文档流的关系。理解如何让元素在不同定位下灵活布局，避免重叠问题。
position 属性指定了元素的定位类型。
position 属性的五个值：
元素可以使用的顶部，底部，左侧和右侧属性定位。
然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
1、static：默认的，也就是没有定位，那么没有指定定位方式是什么？是相对于文档流，什么叫相对于文档流，比如，
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
像这样的Html代码，会一行一行的往下展示，这里要注意区分行内元素以及块级元素。
2、absolute 绝对定位
常用的方法是：
h2
{
position:absolute;
left:100px;
top:150px;
}left top right bottom是四个方向。要注意，假如 父元素下面有一个子元素，
那么子元素的绝对定位是相对于父元素来说的。
如果该子元素的父元素没有指定定位方式，也就是默认的static，那么子元素再往父元素的父元素去找，也就是说如果父元素没有设置特殊的定位方式，就会相对于浏览器窗口进行绝对定位了，
注意绝对定位已经脱离了文档流了，会出现重合的情况。
3、relative 相对定位
相对定位是相对的谁？ 答：一个元素本该在的位置。
举个例子，正常文档流写了几个h1标签，因为h1是块级元素所以会不停的换行，
如果给其中一个h1指定了相对定位，left：10px，那么就会从原本正确的位置 -- 向右移动10px。
4、固定定位fixed
position：fixed；
固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。最常用的就是电脑里面是不是弹出的小广告，如果你不差掉它，当时滑动鼠标查看网页时，小广告一直会在那里，还有常用的就是网站或者APP的导航栏和底部的选择栏。
5、sticky 粘性定位
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative;
而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
如图：滑动条已经往下滑了，仍然会固定在距离页面头部10px的位置处。
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
