将logo定位到页面左上角时文字出现在上方的原因是什么

问题原因 #

• 你给.logo设置position: absolute后，该元素会脱离常规文档流，后续的<h1>、<p>属于常规文档流元素，布局时不会感知到绝对定位logo的存在，会直接从页面左上角开始排列，刚好和logo位置重叠。
• 默认堆叠规则下，没有显式设置z-index的元素，DOM结构中后出现的元素堆叠层级高于先出现的元素，所以后出现的标题和文本就覆盖在了logo上方。

解决方案 #

方案1：保留绝对定位（适合需要logo悬浮在内容上方的场景） #

给logo设置大于0的z-index属性，提升它的堆叠层级，就能让它显示在所有普通元素上方：

.logo {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99; /* 数值只要大于0即可，数值越高层级越高 */
}

方案2：删除绝对定位（适合常规排版，logo作为页面首个内容块的场景） #

如果不需要logo悬浮在其他内容上，完全没必要用绝对定位，你本身已经把logo放在HTML结构的最前面，常规文档流下它会自动排在页面最左上角，后续内容会依次排在它下方不会重叠：

body {
  position: relative;
  margin: 0;
}

.logo {
  width: 400px;
  height: 400px;
  /* 删除position、top、left相关属性即可 */
}

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