如何将带有 active 类的列表项置顶显示

在传统文档流中，HTML 元素的渲染顺序严格遵循源码顺序，无法仅靠 CSS 改变 DOM 位置。但借助 Flexbox 布局，我们可以在视觉呈现层面重新排序子元素——这正是 order 属性的核心能力。

✅ 实现原理

将

设为 flex 容器（display: flex; flex-direction: column），其所有
• 子项即成为 flex 项目。默认 order: 0，数值越小越靠前。因此只需：
  • 给所有
  • 设置 order: 1（统一后置）；
  • 给 .slide.active 单独设置 order: 0（优先级更高，视觉上置顶）。

  ? 完整示例代码

  .sliderscroll {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
  }
  
  .sliderscroll li {
    order: 1; /* 默认置于后续位置 */
    padding: 8px 12px;
    margin: 4px 0;
    background: #f9f9f9;
    border-radius: 4px;
  }
  
  .sliderscroll li.slide.active {
    color: #d32f2f;
    font-weight: bold;
    order: 0; /* 关键：置顶显示 */
    background: #ffebee;
  }

  <ul class="sliderscroll">
    <li class="slide">List A</li>
    <li class="slide">List B</li>
    <li class="slide">List C</li>
    <li class="slide active">List D</li>
    <li class="slide">List E</li>
    <li class="slide active">List F</li>
  </ul>

  ⚠️ 注意事项：

  • order 仅影响视觉顺序，不改变 DOM 结构或语义顺序（对屏幕阅读器、SEO 无影响）；
  • 必须为父容器（
    ）显式声明 display: flex，且 flex-direction: column 保证垂直排列；
    • 若需兼容 IE10+，order 属性支持良好，但需注意旧版 Safari 可能需要 -webkit-order 前缀（现代项目通常无需）；
    • 此方案纯 CSS 实现，零 JS 依赖，性能高效，适合静态排序场景。

  该方法简洁、可维护性强，是现代前端处理“动态视觉优先级”需求的标准实践之一。

  今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~