HTML/CSS布局问题：如何将指定文本移至header下方

1. 排查定位问题 #

如果你的header或者.topic标签用了position: absolute/fixed这类脱离文档流的定位，会直接打乱正常布局顺序。

• 给header设置position: relative（如果需要内部元素定位的话），同时保证.topic保持默认的static定位，它就会自然排在header下方。
• 要是非得用定位，给.topic加position: relative，再通过top或者margin-top值调整到header正下方。

2. 清除浮动影响 #

如果header里面用了float属性，很可能导致header高度塌陷，让.topic跑到浮动元素旁边。给header加个清除浮动的样式就行：

header::after {
  content: "";
  display: block;
  clear: both;
}

或者简单点给header设置overflow: hidden（注意这个可能会裁剪内部超出的元素，按需使用）。

3. Flex布局调整 #

如果你的外层容器用了display: flex，大概率是排列方向或者对齐方式出了问题：

• 把容器的flex-direction设为column，这样header和.topic就会从上到下垂直排列。
• 如果是横向排列的需求，给.topic设置flex-basis: 100%，强制它换行到header下方。

4. 重置盒模型边距 #

检查下.topic是不是设了负的margin-top，或者header有负的margin-bottom，这些都会让元素重叠。可以重置边距：

header {
  margin-bottom: 0;
}
.topic {
  margin-top: 1rem; /* 间距可以根据自己的需求调整 */
}

要是能贴出你的HTML和CSS代码，我可以给你更精准的调整方案。

内容的提问来源于stack exchange，提问作者4U FROM ME