为何设置position:absolute未指定top/left时元素会堆叠在同一位置？

这个表现完全是CSS规范定义的预期行为，不是浏览器的渲染bug。

• 绝对定位的默认位置规则：给元素设置position: absolute但没写top/left/right/bottom任何偏移值的时候，元素不会随便定位到其他位置，会停在它的静态位置——也就是假设这个元素没开绝对定位、处在正常文档流里本来应该排布的位置。
• 绝对定位的脱流特性：设置了position: absolute的元素会完全脱离正常文档流，不会在父元素中占据任何布局空间，对后续排在常规流里的元素来说，这个脱流元素相当于不存在。
• 两个元素堆叠的完整逻辑：
  1. 第一个.card渲染时，父元素内部没有其他占位置的内容，作为块级元素它的默认起始位置就是父元素内容区的左上角，因此它直接定位在这个位置，之后立刻脱流，不再占用父元素的布局空间。
  2. 第二个.card渲染时，因为第一个元素已经脱流不占位置，常规流计算时会认为父元素内部还是空的，所以第二个块级元素的静态位置同样是父元素内容区的左上角，最终也定位到了这个坐标。
  3. 两个元素的位置坐标完全重合就出现了堆叠效果，DOM顺序更靠后的第二个元素默认堆叠层级更高，会盖在第一个元素上方。

<div>
  <div class="card">Text</div>
  <div class="card">Text2</div>
</div>

div.card {
  width: 200px;
  height: 200px;
  background-color: pink;
  transition: all 0.7s;
  position: absolute;
}

小提示：如果不想让两个元素重叠，要么给绝对定位元素显式设置不同的top/left偏移值，要么改用不脱流的定位方案比如position: relative即可。

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