不使用position: fixed实现固定元素及fixed下input无法输入问题咨询

input无法输入是因为.introduceSquare的CSS配置中设置了z-index: -998，负z-index会让整个容器的层级低于页面根元素的默认层级，相当于整个固定区域被压在了其他页面内容的下方，你点击输入框时实际选中的是盖在它上方的元素，无法触发输入框的焦点，自然不能输入内容。
修复这个问题只需要把z-index改成正数即可，比如设置z-index: 10，只要数值高于其他可能覆盖在它上方的元素层级即可。

• 使用position: sticky
  sticky属性兼具relative和fixed的特性，元素会在页面滚动到你设置的阈值位置时自动固定，不会完全脱离文档流，也不会默认占用层级影响其他元素交互，示例配置：

.introduceSquare {
  width: 100%;
  text-align: center;
  position: sticky;
  top: 10%; /* 滚动到距离视口顶部10%位置时固定 */
  z-index: 10;
  color: #fdfce5;
}

• 使用CSS Grid划分固定/滚动区域
  将页面整体拆分为固定展示区和内容滚动区两个网格模块，限制滚动只在内容区生效，固定区自然不会跟随滚动移动：
  全局布局示例CSS：

/* 页面外层容器 */
.page-container {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
}
/* 固定展示区 */
.introduceSquare {
  width: 100%;
  text-align: center;
  margin-top: 10%;
  z-index: 10;
  color: #fdfce5;
}
/* 内容滚动区 */
.content-area {
  overflow-y: auto;
}

• 使用CSS Flex划分固定/滚动区域
  和Grid的实现逻辑一致，通过Flex分配页面高度，限制滚动范围实现固定效果：
  全局布局示例CSS：

/* 页面外层容器 */
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
/* 固定展示区 */
.introduceSquare {
  flex-shrink: 0; /* 禁止固定区被压缩 */
  width: 100%;
  text-align: center;
  margin-top: 10%;
  z-index: 10;
  color: #fdfce5;
}
/* 内容滚动区 */
.content-area {
  flex-grow: 1;
  overflow-y: auto;
}

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