1 问题描述
在上周给18级两位学弟学妹们布置网页学习任务——让他们使用基础css完成一个简单网页框架的排版设计之后，遇到了两位同学的共同反馈：都有共同的问题——H5的定位属性不知道怎么去使用、怎样去使用。那接下来我就对这个问题进行一系列解析。
2 问题分析
在了解如何使用之前，让我们先了解为什么要使用定位。在一般网页的制作中，都会涉及到div盒子的排版问题。因为设计需求的不同，制作者也会相应选择适合的css属性来进行排版。在目前css的属性中能应用到排版设计中的主要有内边距、外边距、浮动和position定位等。今天主要来讲讲position这一属性。
Position属性的含义是定位类型，后面可以输入的值有：static、relative、absolute、fixed、inherit和sticky，其中前面三个在日常开发中使用较为频繁。下面简单介绍一下这三个值吧！
① position:static
static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。
② position:relative
relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
③ position:absolute
absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：
1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。
3 解决方案
行了，话不多讲，我们直接上一段代码来体验relative跟absolute这两个属性值的区别与用法吧
Relation（相对定位）：
假如我们对一个元素设置了相对定位，那么首先这个元素还是和其他元素一样，会出现在它该出现的位置，当我们在设置相应的水平或者垂直偏移量之后，它将在相对它在的文档位置进行移动。
这里特别注意：使用相对位移，就算元素偏移了原来的位置，但它依旧占据着之前的空间！
上面三个浮动块，第二个设置了position:relative了的，这时候大家所看到它的位置并没有什么不同。接下来我们设置一个偏移量：left:50px;top:30px；
这时我们可以看到第二块针对它本身位置的起点进行了一个位移，但是它原来所占据的位置依然还在（虚线线框标示的地方），即使我们把偏移量设置的再大一些，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上了！
Absolute:（绝对定位）
被设置了绝对定位的元素，在文档流中是不占据空间的，如果元素设置了绝对定位，那么他在文档流中的位置会被删除，那这个元素到哪去了呢？它浮了起来其实设置了相对定位定位的relative时也会让该元素浮起来，但是他们的不同点在于，相对定位不会删除他本省在文档流中占据的那块空间，而绝对定位会删除该元素在文档流中的位置，完全从文档流中抽出。
如何确定绝对定位的参照物：假如它的父元素设置了除static之外的定位，比如：position：relative；position：absulote；position：fixed；，那么他就会相对它的父元素来定位；如果他的父元素没有设置定位，那么就得看它的元素的父元素是否有设置定位，如果还是没有就继续向更高的祖先元素类推进行寻找，总之它的定位就是相对于设置了除atatic定位之外的定位（eg：position：absulote；等）的第一个祖元素，如果所有的祖元素都没有以上三种定位中的一种定位，那么他就相对于文档body来定位。
让我们来看看效果图：
这是绝对定位之前的效果图：
让我们对class=”div4”的元素设置position-absolute看看效果怎样：
4 总结
在H5的学习中，希望大家掌握好排版的基本操作，为以后网页的制作打下坚实的基础，其中定位这一章也必不可少！希望本篇文章能帮到你！
