这里是修真院前端小课堂，每篇分享文从html
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】前端
八个方面深度解析前端知识/技能，本篇分享的是：浏览器
【position定位有哪几种？各有什么特色 】布局
1、背景介绍
position 是CSS用来为HTML文档的一些元素提供定位的属性,定位的基本思想很简单，它容许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另外一个元素甚至浏览器窗口自己的位置。 常规取值： 1.static(静态） 2.Relative(相对） 3.Absolute(绝对) 4.fixed(固定)编码
2、知识剖析
文档流
将窗体自上而下分红一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 只有三种状况会使得元素脱离文档流，分别是：浮动、绝对定位和固定定位。orm
STATIC(静态）
HTML元素的默认值，不受top、bottom、left、right属性影响，元素出如今正常的文档流中htm
RELATIVE(相对）
相对定位, 特色：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。教程
ABSOLUTE(绝对)
绝对定位 特色:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，不然为html文档自己。文档
FIXED(固定)
固定定位, 特色：相似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置。it
STICKY(定位)
sticky 英文字面意思是粘，粘贴，因此能够把它称之为粘性定位.position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，以后为固定定位。 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可以使粘性定位生效。不然其行为与相对定位相同。
3、常见问题
相对定位与绝对定位的搭配使用效果？
4、解决方案
父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置再也不相对于浏览器左上角，而是相对于父窗口左上角，若无非static祖先，以初始包含块定位，在浏览器里，根元素的包含块（HTML）为初始包含块，只是通常状况下看上去像是body区域。
5、编码实战
6、拓展思考
absolute与fixed有哪些区别？
fixed与absolute最大的区别在于：absolute的”根元素“是能够被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。
7、参考文献
CSS Position 定位属性
对CSS中的Position、Float属性的一些深刻探讨
8、更多讨论
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不会产生任何效果。
9、鸣谢：
感谢， 汪胜师兄，吴泽华师兄 ，此教程是在他们以前技术分享的基础上完善而成。
10、结束语：
今天的分享就到这里啦，欢迎你们点赞、转发、留言、拍砖~