CSS定位本质是坐标系统切换，需综合考虑文档流、包含块、层叠上下文及祖先属性影响；用错上下文则定位失效。
CSS定位不是“选一个属性就完事”的事，它本质是元素在文档流中的坐标系统切换——用错上下文，再熟也白搭。
为什么
改了top却没动？
因为
不脱离文档流，位移后原占位还在，其他元素照常布局；你看到“没动”，其实是被后面元素盖住了，或父容器没设
裁掉了溢出部分。
调试时先加
确认元素真实位置
若父容器有
、
或
，会创建新的层叠上下文，
可能失效
/
等偏移值对
元素无效，别在没设
的元素上写这些
到底相对谁定位？
它往上找第一个
值为
、
、
或
的祖先元素；找不到就相对于初始包含块（通常是视口），不是父元素。
常见坑：父容器只写了
，但没设
，子元素
直接飞到视口左上角
（如
）可替代
，更简洁，但IE全系不支持
若祖先用了
，哪怕只是
，也会触发其成为包含块——这点连很多资深前端都忽略
在iOS Safari里失灵怎么办？
它本该相对于视口，但在iOS Safari中，如果父容器有
、
或
，
会降级为相对该容器定位。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
检查是否无意中给
或
加了
（比如某些动画库默认注入）
滚动容器若用了
且带
，
在内部可能表现异常
替代方案：用
+
模拟固定效果，兼容性更好，且天然适配滚动边界
为什么
有时完全不生效？
它只在同一个层叠上下文中起作用。两个
即使
差1000，只要属于不同层叠上下文（比如一个在
容器内，另一个没有），就无法直接比较层级。
每个
非
+
非
的元素，或带
/
等属性的元素，都会创建新层叠上下文
不要迷信大数字：
在父层叠上下文
里，依然压不过兄弟上下文中
的元素
调试建议：用浏览器开发者工具的“Layers”面板（Chrome）或“3D View”（Firefox）直观查看层叠结构
定位真正难的不是记属性，而是时刻意识到：每个元素的位置和层级，都是由它自身、父级、祖先级甚至兄弟级的多个CSS声明共同协商出来的。漏掉其中一环，视觉结果就可能完全偏离预期。
positionposition: relativerelativeoverflow: visibleoutline: 1px solid redtransformwill-changefilterz-indextoprightstaticpositionposition: absolutepositionrelativeabsolutefixedstickydisplay: flexposition: relativeabsoluteinsetinset: 0top/right/bottom/left: 0transformtransform: translateZ(0)position: fixedtransformperspectivefilterfixedhtmlbodytransformoverflow: scroll-webkit-overflow-scrolling: touchfixedposition: stickytop: 0z-indexdivz-indextransformpositionstaticz-indexautotransformopacityz-index: 9999z-index: 1z-index: 2