Div不响应、文本覆盖问题及FAQ折叠面板点击异常求助

一、Div元素不响应及文本覆盖问题 #

问题根源 #

• .Frequently标题用position: relative; top: 100px做偏移，相对定位仅改变视觉位置，原占位空间保留，导致下方设置height: 100vh的section与其重叠，出现文本覆盖。
• section强制设置height: 100vh占满视口，再加上align-items: center垂直居中内容，进一步挤压标题空间，加重布局冲突。

修复代码 #

.Frequently {
  margin-top: 100px; /* 替换relative+top，用margin实现顶部空间，不影响布局流 */
  background: -webkit-linear-gradient(rgb(103, 58, 183), rgb(81, 45, 168));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* FAQ SECTION */
section {
  width: 100%;
  /* 移除height:100vh，让section高度自适应内容 */
  margin-top: 2rem; /* 添加上边距，和标题拉开距离 */
}

二、FAQ点击后标题无法到页面顶部问题 #

问题根源 #

• 锚点href="#question1"触发跳转时，浏览器默认将锚点元素滚动到视口顶部，但section的display: flex; align-items: center会让内容垂直居中，导致锚点定位在section中间，而非页面顶部。
• 原标题的top:100px偏移也会阻碍标题自然顶到页面顶部。

修复代码 #

/* 修改section布局，移除垂直居中 */
section {
  width: 100%;
  margin-top: 2rem;
  /* 移除display:flex和align-items:center */
}

/* 可选：添加全局滚动偏移，避免标题贴顶 */
html {
  scroll-padding-top: 20px; /* 根据需求调整数值 */
}

额外说明 #

如果需要FAQ板块仍保持垂直居中，可以保留display:flex; align-items:center，但要给section添加足够的顶部padding，同时调整锚点的滚动目标（比如把锚点设置在标题上，或者使用JavaScript控制滚动位置），但最简单的方案还是让section自适应高度，内容自然排列。

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