positon所有属性值
其中 inherit;initial;unset;属于全局值，不赘述。参考连接
说说另一个术语Normal Flow（正常/文档流） 即浏览器默认的文档布局方式。
定位就是通过设置 position 属性的值来覆盖默认的布局方式。
静态定位
position: static 默认值 默认的布局方式。
相对定位
position: relative 相对默认的布局位置进行定位。仍然在文档流中，一般适用于微调。
绝对定位
position: absolute 绝对定位元素脱离正常文档流，不占据空间，相对其定位上下文（Positioning Context）进行定位。
定位上下文 Positioning Context 又是啥？
定位上下文就是指 绝对定位元素相对哪个元素定位，默认的定位上下文是 <html>。
假如你想设定某个绝对定位元素的定位上下文，则需要在这个元素的某个祖先元素上设置 position: relative。（只要是非static 值即可）
- 绝对定位元素相对于最近的非 static 祖先元素定位
- 当这样的祖先元素不存在时，则相对于根级容器定位。
三个div是同级关系
解释混淆的地方 : "two""three" 元素不存在应用了定位的祖先元素，因此该元素相对于紧邻的祖先（iframe 中的 <body> 元素）绝对定位。最后"three"把"two"覆盖了，尽管"one"元素拥有了position属性，但是并非是后俩div的祖先。再次强调祖先。
三个div属层级one>two>three
该图表明三种div在这种关系下使用z-index属性没用，pink 仍然无法覆盖green颜色的div。
正确示范："one"包含"two""three"，他俩属于同级
==> 补充（一些规范中要求）：
层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比。
固定定位
position: fixed 相对浏览器窗口进行定位。
类似JD app首页底部菜单栏位置。...
粘性定位
position: sticky
参考链接：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning
https://stackoverflow.com/questions/14391208/how-does-z-index-really-work
网友评论