CSS——玩转Position

        如何将元素随心所欲的放置在页面的任意位置？——我想这是每一个刚接触过CSS的初学者都非常在意的问题之一。当然，方法有很多，但我就定位来向大家展示我对其的总结与理解，希望对大家有帮助。

        定位（Position）其实是一个较高级的布局手段，当你理解了定位，对于随心所欲地在页面放置元素便信手拈来。

        那么元素是如何进行定位的呢?——offset（偏移量）定位。这里所说的偏移量是指（ top，bottom，left 和 right 属性）。尤为重要的是：只有开启了定位（Position），才能使用偏移量。

        在CSS中对某个元素使用position属性，其实就是对该元素分配定位的方法，然后再进行偏移量的设置，对元素进行随心所欲的放置。

        position属性有五个不同的位置值——static，absolute，relative，fixed，sticky。

        position：static——浏览器默认值，该设置使元素静止，无定位，一般不需要开发者刻意添加。

        position：absolute——该设置开启了元素的绝对定位。开启后，元素从文档流中脱离，并会改变元素原有的性质（若为行内元素[此时设置宽高等一些属性不会产生任何反应]则变成块元素[此时设置宽高等一些属性会产生反应]，块高度被内容撑开——>元素提升了一个层级。）开启了绝对定位的元素是相对于包含块（正常情况下，包含块是离当前元素最近且开启了定位的祖先块元素，如果所有的祖先元素均未开启定位，则根元素为其包含块[初始包含块]）进行定位。

       position：relative——该设置开启了元素的相对定位。开启后，元素不会从文档流中脱离，也不会改变元素原有的性质（块元素还是块元素，行内元素还是行内元素，同时不会影响其他元素的位置[此时涉及到其他元素可能被遮盖等问题]），会提升元素层级，仅参照于元素在文档流中位置而进行定位（正常定位）

       position：fixed——该设置开启了元素的固定定位。这是一种特殊的绝对定位，但是有一点是不同于绝对定位的（固定定位永远参照与浏览器的视口进行定位）。同时，固定定位的元素不会随着页面滚动条滚动。

        position：sticky——该设置开启了元素的粘滞定位。类似于相对定位，不同的是开启了粘滞定位的元素可以在元素到达某个位置时将其固定

       扩展：对元素进行定位时，可能会导致与其他元素重叠问题。z-index属性可以解决该问题。该属性用来指定元素的堆栈顺序（哪个元素在前，哪个元素在后），若未指定，则最后的元素将显示在顶部。

注：以上仅个人总结与理解，若有不足望评论区留言。