疑问：为question类div设置相对定位为何仅首个元素生效？

以下是几种常见的排查方向：

1. CSS语法错误导致规则中断 #

检查你的完整CSS代码，是否在.question规则之后存在语法错误（比如遗漏大括号}、分号;，或者非法的属性值）。如果前面的CSS出现语法错误，浏览器会停止解析后续的同类型规则，导致只有第一个元素（错误前已解析的规则）生效。

2. 高优先级样式覆盖 #

检查后续.question元素是否被其他更高优先级的CSS规则覆盖：

• 有没有内联样式（比如<div class="question" style="position: static;">）直接覆盖了类样式
• 是否存在ID选择器、行内样式、或者更具体的选择器（比如.container .question）覆盖了.question的规则
• 打开浏览器开发者工具（F12），查看元素的“样式”面板，确认.question的属性是否被划掉，右侧会显示覆盖它的规则

3. 误写的限定选择器 #

确认你的CSS中.question选择器没有被意外添加了限定伪类，比如：

.question:first-child {
  text-align: center;
  position: relative;
  top: 10px;
}

这种写法只会选中父元素下的第一个.question元素，而非所有同类元素。

4. HTML结构的隐性布局问题 #

• 确认后续.question元素是否被嵌套在其他具有position: static或重置样式的父容器中，导致top:10px的偏移效果被抵消（比如父容器没有足够空间，或者布局规则覆盖了相对定位的偏移）
• 检查元素的class属性是否存在拼写错误（比如多空格、大小写问题，你的示例中写法是正确的）

快速排查步骤 #

打开浏览器开发者工具（F12），选中第二个.question元素：

1. 在“元素”面板确认class属性正确
2. 切换到“样式”面板，查找.question规则是否被加载
3. 查看“计算”面板，确认最终生效的position和top属性值

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