如何实现left值递增的序列p元素？CSS无法实现时的替代方案

现有以下CSS和HTML代码，实现了多个带相对定位的<p>元素，其中每个元素的left值按10px递增：

.p_relative1 {
  position: relative;
  left: 10px;
  top: 10px;
}

.p_relative2 {
  position: relative;
  left: 20px;
  top:  20px;
}

.p_relative3 {
  position: relative;
  left: 30px;
  top:  40px;
}

.p_relative4 {
  position: relative;
  left: 40px;
  top: 50px;
}

<p class="p_relative1">relative1</p>
<p class="p_relative2">relative2</p>
<p class="p_relative3">relative3</p>
<p class="p_relative4">relative4</p>

希望继续添加relative5、relative6等更多元素，让每个元素的left值持续按10px幅度递增，但原生CSS无法实现动态递增逻辑，求可行替代方案。

方案1：CSS计数器 + 动态计算 #

利用CSS计数器追踪元素序号，结合calc()自动计算left值，无需手动编写每个元素的样式：

/* 给元素包裹容器，初始化计数器 */
.relative-container {
  counter-reset: relative-index 0;
}

.relative-container p {
  position: relative;
  /* 每个元素递增计数器 */
  counter-increment: relative-index;
  /* left值 = 序号 × 10px */
  left: calc(counter(relative-index) * 10px);
  /* 匹配原top值规律：第1/2个为10/20px，第3/4个为40/50px，可按需调整计算逻辑 */
  top: calc((counter(relative-index) - 1) * 10px + (floor(counter(relative-index)/2) * 10px));
}

<div class="relative-container">
  <p>relative1</p>
  <p>relative2</p>
  <p>relative3</p>
  <p>relative4</p>
  <p>relative5</p>
  <p>relative6</p>
</div>

后续只需在容器内添加<p>元素，left值会自动按10px递增，top值也可通过计算式匹配需求。

方案2：CSS预处理器（Sass/LESS）批量生成样式 #

用Sass的循环语句批量生成类名和对应样式，编译后得到静态CSS：

// 生成1到10的类，可自行调整数量
@for $i from 1 through 10 {
  .p_relative#{$i} {
    position: relative;
    left: $i * 10px;
    /* 匹配原top值规律：奇数序号为10、40...，偶数为20、50... */
    top: $i * 10px + (floor(($i - 1)/2) * 10px);
  }
}

编译后会自动生成.p_relative1至.p_relative10的样式，添加新元素时只需给对应类名即可。

方案3：JavaScript动态生成元素与样式 #

如果需要大量元素或动态添加，用JS自动创建元素并计算样式：

const container = document.createElement('div');
document.body.appendChild(container);

// 生成10个示例元素，可调整数量
for (let i = 1; i <= 10; i++) {
  const p = document.createElement('p');
  p.textContent = `relative${i}`;
  p.style.position = 'relative';
  p.style.left = `${i * 10}px`;
  // 按原top规律设置
  p.style.top = `${i * 10 + (Math.floor((i - 1)/2) * 10)}px`;
  container.appendChild(p);
}

这种方式无需手动编写HTML和CSS，可灵活控制元素数量和样式规律。

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