一个新手后端需要了解的前端核心知识点之position（一）

以下内容是基于观看慕课网视频教程总结的知识点，边打代码边总结，符合自己的思维习惯。不是针对新手入门

我做程序的初衷是想做一个网站出来。HTML语言当然重要啊，缺什么就百度什么，很浪费时间，还是好好的打好基础吧。

作为一个没有真正前端基础的后端开发，用框架很爽，可以做出简洁美观的基本界面，但是突然看见一些边距、位置想挪一挪才发现，百度作用也越来越小，怎么弄都不太对！

这次我已写个原生HTML页面的网站为出发点，准备基本的几个核心东西，position是其中之一：

知识前提：布局方式

#标准流，按顺序排列，表现为块级、内联；块级元素会占用设置的整行，内联是内容满一行才自动换行

#浮动，//TODO

#定位，使用position脱离标准流，position属性决定了元素如何定位，通过top、right、bottom、left实现位置改变

使用postion之后，使元素有层级关系，后写的在先写的前边（可遮挡先写的）

 

position的relative 参数，相对定位受父元素的约束，如果父元素没有position属性，则子元素无效

position 的absolute参数，如果父元素没有定位属性，元素将以窗口进行定位

position 的fixed参数，配合top、left、right、bottom的位置属性，文档会脱离正常的文档流，不受制于标准流的约束，在整个窗口进行移动定位并拥有层级的概念，常见的场景有对联广告，弹窗登录； 而且不受拥有定位属性的父元素的约束（这是固定定位和绝对定位的区别），仍然是相对于窗口进行定位

position的inherit 参数，其含义是继承的意思，继承父元素设置的position属性，如果父元素没有设置position属性，则子元素也不会有（相当于没写position属性）

注意：当元素设置position之后，没有设置left、right、top、bottom时，其实相当于没有设置position

 

最后就是z-index啦，使用position之后由于有了层级关系，我们可以通过z-index设置元素的叠加关系，但是要依赖定位属性哦

学习时的误区！      普通的元素之间也是有层级关系的，后写覆盖先写的

要点：

# z-index大的元素会覆盖z-index小的元素

# z-index为负值，元素被普通的标准流的属性覆盖

# z-index为 auto的元素不参与层级比较

注意：当设置position但不写z-index的时候默认是0，浏览器则默认是auto。还有当position是static的时候，设置z-index是无用的。还有就是子元素基于父元素的层级关系。