position定位有哪几种？各有什么特点

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【position定位有哪几种？各有什么特点    】

 

一、背景介绍
position 是CSS用来为HTML文档的一些元素提供定位的属性,定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 常规取值： 1.static(静态） 2.Relative(相对） 3.Absolute(绝对) 4.fixed(固定)

二、知识剖析
文档流
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和固定定位。

STATIC(静态）
HTML元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中

RELATIVE(相对）
相对定位, 特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

ABSOLUTE(绝对)
绝对定位 特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。

FIXED(固定)
固定定位, 特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置。

STICKY(定位)
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位.position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

三、常见问题
相对定位与绝对定位的搭配使用效果？
四、解决方案
父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角，若无非static祖先，以初始包含块定位，在浏览器里，根元素的包含块（HTML）为初始包含块，只是一般情况下看上去像是body区域。

五、编码实战

六、拓展思考
absolute与fixed有哪些区别？

fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

七、参考文献
CSS Position 定位属性
对CSS中的Position、Float属性的一些深入探讨

八、更多讨论

 1 ）position定位相互覆盖问题

 答：定位覆盖的优先级还是先取决于父辈元素的z-index的大小（拼爹），然后才是自己的z-index的大小。 另外， 相对定位relative元素的定位是相对其正常位置进行移位，不脱离文档流，它原本所占的空间不会改变； 绝对定位absolute元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于body，absolute定位使元素的位置与文档流无关，因此不占据空间。

 2 ）position:fixed;无效问题

 答：如果一个元素设置了position:fixed;其父元素设置了tansform属性的话，不管是scale()、rotate()、还是translate()，其fixed值都会失效，直接会使position:fixed;变成position:absolute;的效果。 所以，我们fixed的元素的父级有transform属性的话，fixed效果完全没有。

 3 ）假如 position 和 float 同时设置会出现什么问题？兼容性如何？哪个属性会被覆盖

 答：同时设置后，如果使用的是相对定位，元素会先浮动起来，然后再根据position进行定位。如果使用的时绝对定位，float不会产生任何效果。

九、鸣谢：

感谢， 汪胜师兄，吴泽华师兄 ，此教程是在他们之前技术分享的基础上完善而成。

十、结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~