You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用CSS制作公交站点示意图——侧边图标滑动定位问题

avatar
DevOps 小满
2026-8-8
公交站点示意图侧边滑动公交图标实现方案

问题说明

我正在制作网页版公交站点示意图，已经用列表完成了基础样式，现在需要添加能沿侧边垂直滑动的公交图标来显示车辆位置。要求图标能从容器顶部（0%）到底部（100%）移动，我已有接收位置值的JS代码，但用flexbox做侧边容器时图标会跑出页面。另外希望多个图标可以重叠，且都相对容器而非彼此移动。

原代码

CSS 样式 

.diagrama-linea {
  display: flex;
  flex-direction: row;
}

.diagrama-dentro {
  padding-left: 1em;
}

.paradas-linea {
  list-style: none;
  border-left: 2px solid;
  border-color: var(--color-linea);
  padding-left: 1em;
  margin-left: 4em;
}

.parada::before {
  content: '';
  width: 1em;
  height: 1em;
  background-color: var(--color-linea);
  position: absolute;
  border-radius: 50%;
  margin-left: -1.55em;
}

.parada p {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.simbolo_linea {
  padding: 2px 8px;
  border-radius: 4px;
  color: white!important;
}

.simbolo_linea,
a {
  text-decoration: none;
}

HTML 结构 

<div class="diagrama-linea">
  <div class="marca-bus"><img src="bus.png">
    <p><small>bus 999</small></div>
  <div class="diagrama-dentro">
    <ol class="paradas-linea" style="--color-linea: #019F02">
      <li class="parada"><span class="nombre_parada">Stop 1</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 2</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 3</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 4</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 5</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 6</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 7</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 8</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #019F02">12</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 9</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #019F02">12</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 10</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #019F02">12</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 11</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #019F02">12</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 12</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #F94F8E">11</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 13</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #019F02">12</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 14</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #00B17A">4</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 15</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #FDB515">2</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 16</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #FDB515">2</span></p>
      </li>
    </ol>
  </div>
</div>

解决方案

核心修改思路

  • 将侧边容器设置为相对定位，作为公交图标的定位基准
  • 每个公交图标使用绝对定位，通过top属性控制垂直位置，实现重叠效果
  • 确保侧边容器与站点列表高度一致，保证滑动范围准确

修改后的完整代码

CSS 新增/修改样式

/* 新增：侧边公交容器，相对定位，高度与站点列表对齐 */
.bus-container {
  position: relative;
  width: 60px; /* 根据公交图标尺寸调整 */
  height: 100%;
}

/* 修改：原.marca-bus改为公交图标类，绝对定位 */
.bus-icon {
  position: absolute;
  top: 0; /* JS动态修改此值为0%-100% */
  left: 0;
  transform: translateY(-50%); /* 让图标中心对齐位置点 */
}

/* 保留原样式，调整.diagrama-linea确保高度对齐 */
.diagrama-linea {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.paradas-linea {
  list-style: none;
  border-left: 2px solid;
  border-color: var(--color-linea);
  padding-left: 1em;
  margin-left: 1em; /* 调整间距适配新容器 */
}

/* 原其他样式保留不变 */
.diagrama-dentro {
  padding-left: 1em;
}

.parada::before {
  content: '';
  width: 1em;
  height: 1em;
  background-color: var(--color-linea);
  position: absolute;
  border-radius: 50%;
  margin-left: -1.55em;
}

.parada p {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.simbolo_linea {
  padding: 2px 8px;
  border-radius: 4px;
  color: white!important;
}

.simbolo_linea,
a {
  text-decoration: none;
}

修改后的HTML结构

<div class="diagrama-linea">
  <!-- 替换为公交容器，可添加多个公交图标 -->
  <div class="bus-container">
    <div class="bus-icon" style="top: 20%">
      <img src="bus.png" alt="Bus 999">
      <p><small>bus 999</small></p>
    </div>
    <div class="bus-icon" style="top: 60%">
      <img src="bus.png" alt="Bus 888">
      <p><small>bus 888</small></p>
    </div>
  </div>
  <div class="diagrama-dentro">
    <ol class="paradas-linea" style="--color-linea: #019F02">
      <li class="parada"><span class="nombre_parada">Stop 1</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 2</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 3</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 4</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 5</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 6</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 7</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #C0910F">3</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 8</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #019F02">12</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 9</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #019F02">12</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 10</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #019F02">12</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 11</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #019F02">12</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 12</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #F94F8E">11</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 13</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #019F02">12</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 14</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #00B17A">4</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 15</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #FDB515">2</span></p>
      </li>
      <li class="parada"><span class="nombre_parada">Stop 16</span>
        <p><a href="#">Enlaces:</a> <span class="simbolo_linea" style="background-color: #FDB515">2</span></p>
      </li>
    </ol>
  </div>
</div>

JS 适配说明

你的现有JS代码只需修改公交图标的top属性即可，示例：

// 假设获取到的位置值为pos（0-100）
const busIcon = document.querySelector('.bus-icon');
busIcon.style.top = `${pos}%`;

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.08 13:10:25