如何在垂直虚线中间放置IconButton并实现重叠效果？

需求与当前实现 #

需求：在垂直虚线中间添加IconButton，使其居中且与相邻元素产生重叠效果。
当前实现：使用两个高度为50%的.cell-separator垂直虚线div，中间放置IconButton，但按钮未实现重叠，而是占据了全部中间空间。

当前代码结构：

<div className={'vertical'}>
    <div className={'cell-separator'} />
    <div className={'icon-separator'}>
        <IconButton iconName={'StatusCircle'} />
    </div>
    <div className={'cell-separator'} />
</div>

当前CSS：

.cell-separator {
    border: 1px dotted;
    height: 50%;
}

问题解答 #

Q1：是否可以仅使用一个分隔div，在其中间放置IconButton？还是必须使用两个分隔div搭配中间按钮？

可以只用一个分隔div实现，不需要拆分两个。这种方式结构更简洁，比如通过给单个分隔div设置背景渐变实现垂直虚线，再将IconButton绝对定位到div的中间位置即可达到效果。当然双div方案也能实现，但单div写法更优雅。

Q2：如何通过CSS实现IconButton的重叠效果？当前按钮占据了中间全部空间。

核心是让按钮脱离文档流，同时调整定位和样式，让它覆盖在虚线上：

1. 给父容器.vertical设置position: relative，作为按钮定位的参考基准；
2. 让按钮容器（或直接给IconButton）使用position: absolute，通过top: 50%+transform: translateY(-50%)实现垂直居中；
3. 给按钮设置与页面背景一致的背景色，同时调整内边距或尺寸，让它能覆盖下方的虚线，形成“断开虚线放置按钮”的视觉效果；
4. 如果采用单分隔div方案，可通过linear-gradient实现上下两段虚线，中间留空给按钮。

修改后的代码示例（单分隔div方案）：

<div className="vertical">
    <div className="single-separator"></div>
    <IconButton className="middle-icon" iconName="StatusCircle" />
</div>

.vertical {
    position: relative;
    height: 300px; /* 示例高度，根据实际场景调整 */
    width: 2px;
}

.single-separator {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        currentColor 0%, currentColor 45%, 
        transparent 45%, transparent 55%, 
        currentColor 55%, currentColor 100%);
    background-size: 2px 100%;
    color: #ccc; /* 虚线颜色 */
}

.middle-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff; /* 与页面背景一致 */
    padding: 4px; /* 增加内边距，更好覆盖虚线 */
    border-radius: 50%; /* 可选，让按钮更贴合圆形图标 */
}

如果坚持使用双分隔div方案，调整CSS如下：

.vertical {
    position: relative;
    height: 300px;
    display: flex;
    flex-direction: column;
}

.cell-separator {
    border-left: 1px dotted #ccc;
    flex: 1;
}

.icon-separator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 4px;
    border-radius: 50%;
}

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