<h1>元素位置异常：代码实现后显示在容器底部而非顶部

嘿，我碰到过好多次这类问题，大概率是这几个常见原因导致的，你可以逐一排查：

1. Margin塌陷导致的位移 #

这是最常见的情况：当你的父容器没有设置padding、border，也没开启overflow属性时，子元素<h1>的margin-top会“穿透”到父容器外面，相当于父容器被这个margin顶了起来。如果父容器有固定高度，<h1>就会被挤到容器底部。

解决方法（选一个就行）：

• 给父容器加个极小的内边距，阻断塌陷：

.container {
  padding-top: 0.1rem;
}

• 给父容器设置overflow: hidden：

.container {
  overflow: hidden;
}

• 给父容器加个透明的顶部边框：

.container {
  border-top: 1px solid transparent;
}

2. Flex/Grid布局的默认对齐问题 #

如果你的容器用了display: flex或者display: grid，默认的对齐规则可能会把<h1>推到底部：

• 若容器是flex且设置了flex-direction: column，同时容器有固定高度，默认的对齐逻辑可能让其他子元素占满空间，把<h1>挤到下方。
• 若不小心给容器设置了align-items: flex-end（水平布局时）或justify-content: flex-end（垂直布局时），也会导致元素靠下。

解决方法：
明确设置对齐方式为顶部对齐：

/* Flex垂直布局时 */
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 强制顶部对齐 */
}

/* Flex水平布局或Grid布局时 */
.container {
  display: flex; /* 或 grid */
  align-items: flex-start; /* 顶部对齐 */
}

3. 定位属性设置错误 #

如果你的容器用了position: relative，而<h1>被设置了position: absolute但没指定top: 0，它会默认停留在原本文档流的位置，要是容器有高度，就会看起来在底部。

解决方法：
给<h1>加上顶部定位：

.container {
  position: relative; /* 确保h1相对于容器定位 */
}
h1 {
  position: absolute;
  top: 0;
  left: 0; /* 可选，确保靠左对齐 */
}

你可以先检查这几个方向，应该能找到问题所在～

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