固定定位顶部横幅被内容拖拽下移及标题样式异常求助

兄弟，太懂这种卡几个小时的崩溃感了！咱们一步步拆解这俩问题，搞定它们：

一、固定横幅被内容拖拽到中部的问题 #

固定定位（position: fixed）本来是脱离文档流的，理论上不会被页面内容影响位置，出现这种情况大概率是踩了这几个坑：

1. 父元素破坏了fixed的视口定位 #

如果你的横幅div的父元素设置了transform、perspective或filter属性，fixed定位会从「相对于浏览器视口」变成「相对于这个父元素」，导致它跟着父元素滚动，被内容带下去。
👉 排查方法：打开浏览器开发者工具（F12），选中横幅元素，往上找父元素，看有没有这些属性，有的话直接去掉或者调整父元素的样式。

2. 横幅的定位属性没写全 #

只写position: fixed和width: 100%是不够的，必须明确指定它的位置：

/* 正确的横幅样式示例 */
.top-banner {
  position: fixed;
  top: 0; /* 死死钉在顶部 */
  left: 0;
  right: 0; /* 配合width:100%，确保横向铺满 */
  width: 100%;
  margin: 0;
  z-index: 999; /* 确保在所有内容上层，不会被盖住 */
  background-color: #ffffff; /* 加个背景，避免内容透过横幅显示 */
  height: 60px; /* 根据你的需求设置高度 */
}

3. 下方内容需要避开横幅 #

因为fixed元素脱离文档流，页面内容会默认跑到横幅下面，所以要给body或者主内容容器加顶部外边距：

body {
  margin-top: 60px; /* 值等于横幅的高度，避免内容被遮挡 */
}

二、h1、h2变成普通文本的问题 #

这一般是样式被覆盖了，常见原因：

1. 全局样式重置（比如用了* { font-weight: normal; font-size: 16px; }）把标题的默认加粗、大字体给清掉了；
2. 其他CSS规则（比如类选择器、ID选择器）的优先级比标签选择器高，覆盖了h1/h2的样式。

👉 解决方法：

1. 用浏览器开发者工具（F12）选中h1元素，看「Styles」面板里的规则，找到被划掉的默认样式，看看是哪个规则在覆盖它；
2. 手动给标题添加明确的样式，提高优先级：

h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 1rem 0;
  /* 其他你需要的样式，比如颜色、行高 */
}

h2 {
  font-size: 2rem;
  font-weight: bold;
  margin: 0.8rem 0;
}

如果还是被覆盖，可以用更具体的选择器（比如.main-content h1），或者紧急情况下临时用!important（不推荐长期用，尽量靠选择器优先级解决）。

先按这几步排查，应该能解决你的问题！

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