嘿，我来帮你搞定这两个前端问题！咱们逐个拆解：

Div重叠通常是布局属性冲突或者脱离文档流导致的，给你几个排查和解决的方向：

• 检查定位方式：如果用了position: absolute/fixed，要确认父元素是否设置了position: relative作为定位参考，避免元素脱离文档流后乱跑重叠。可以用浏览器F12调试工具查看元素的定位参数，调整top/left等值，或者换成relative/static定位（如果不需要脱离文档流的话）。
• 清理浮动残留：如果Div用了float属性，一定要在父元素上清除浮动——比如给父元素加clearfix类，或者设置overflow: hidden，不然浮动元素会让后续元素错位重叠。
• 检查内外边距：负margin或者过大的padding都可能挤得元素重叠，用调试工具逐个查看元素的margin/padding值，调整到合理范围。
• 确认布局容器规则：如果用Flexbox或Grid布局，检查flex-wrap、grid-template-columns等属性是否正确，确保容器给子元素留了足够的排列空间，不会互相挤压。
• 调整层级顺序：如果是元素层级覆盖导致的视觉重叠，可以用z-index属性调整，把需要显示在上方的元素设更高的z-index值（注意不要滥用，避免层级混乱）。

你已经用了Bootstrap的折叠组件，咱们可以利用组件自带的状态类+CSS轻松实现这个效果，不用额外写复杂JS：

首先完善你的HTML结构，给触发按钮加个自定义类（比如toggle-icon）方便定位：

<div style="margin-right:auto;">
  <a class="flex accordion-toggle collapsed toggle-icon" data-toggle="collapse" href="#{{item.sys_ID}}" role="button" aria-expanded="false" aria-controls="{{item.sys_ID}}">
    {{你的预约标题内容}}
  </a>
</div>
<div class="collapse" id="{{item.sys_ID}}">
  <!-- 折叠面板的详情内容 -->
</div>

然后添加CSS样式，通过collapsed类的切换来改变图标状态：

/* 默认折叠状态显示加号，加过渡动画让变形更流畅 */
.toggle-icon::after {
  content: "+";
  margin-left: 8px;
  font-size: 18px;
  transition: transform 0.3s ease;
  display: inline-block; /* 确保旋转动画生效 */
}

/* 展开状态（移除collapsed类）把加号旋转成X（或者直接换成减号） */
.toggle-icon:not(.collapsed)::after {
  /* 方案1：旋转加号变X */
  transform: rotate(45deg);
  /* 方案2：直接替换成减号 */
  /* content: "-"; */
}

如果你的项目用了Font Awesome这类图标库，也可以用图标元素替代伪元素，比如：

<a class="flex accordion-toggle collapsed" data-toggle="collapse" href="#{{item.sys_ID}}" role="button" aria-expanded="false" aria-controls="{{item.sys_ID}}">
  {{你的预约标题内容}}
  <i class="fas fa-plus ms-2"></i>
  <i class="fas fa-minus ms-2 d-none"></i>
</a>

对应的CSS切换显示：

.accordion-toggle:not(.collapsed) .fa-plus {
  display: none !important;
}
.accordion-toggle:not(.collapsed) .fa-minus {
  display: inline-block !important;
}

这样点击按钮时，Bootstrap会自动给a标签添加/移除collapsed类，CSS就会自动切换图标状态啦~

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