为何transform: translateY(-40px)会使.two覆盖.one？

核心原因是transform属性（值不为none时）会触发元素创建新的层叠上下文，层叠上下文的层级规则直接决定了元素的显示顺序：

• 当.two没有transform时：
  -.one因为设置了transform: translateX(50%)，创建了一个层叠上下文，属于层叠顺序里的「z-index:auto/0的层叠上下文」层级；
  -.two只是普通的inline-block元素，没有创建层叠上下文，属于「普通流内的inline/inline-block元素」层级。
  前者的层级优先级更高，所以.one会覆盖.two。

• 当.two添加transform: translateY(-40px)后：
  -.two也创建了独立的层叠上下文，此时它和.one处于同一个层级（都是z-index:auto的层叠上下文）。
  对于同层级的元素，DOM结构中位置靠后的元素会在视觉上层叠在前面的元素之上，所以.two会覆盖.one。

简单总结：transform让元素进入了更高的层级梯队，当两个元素都在这个梯队里时，就按DOM顺序来决定谁在上谁在下。

内容的提问来源于stack exchange，提问作者Samrudh S