设置position:relative后子元素重叠，如何实现元素堆叠与按钮重叠？

问题根源 #

你的代码存在两个核心问题：

1. 表格设置了position:absolute，导致父容器无法被内容撑开高度，多个元素叠加在一起；
2. .circle类缺少基础样式，导致X无法在圆形内部居中显示。

修改步骤及代码 #

1. 调整HTML结构（移除表格的绝对定位）

<div id="pickedLingua">
    <template id="productrow" >
        <div class="item-container">
            <table class="lingsel">
                <tr>
                    <td style="width: 33%">
                        <p>
                            <!-- content from js code -->
                        </p>
                    </td>
                    <td style="width: 33%">
                        <div class="containerthing">
                            <p class="small">
                                <!-- content from js code -->
                            </p>
                        </div>
                    </td>
                    <td style="width: 33%">
                        <div class="containerthing">
                            <p class="small">
                                <!-- content from js code -->
                            </p>
                        </div>
                    </td>
                </tr>
            </table>
            <div class="circle">
                <span>X</span>
            </div>
        </div> 
    </template>
</div>

2. 添加CSS样式

.item-container {
    position: relative; /* 保留相对定位，作为关闭按钮的定位上下文 */
    margin-bottom: 10px; /* 可选：给元素之间添加间距 */
}

.lingsel {
    width: 100%; /* 让表格占满父容器宽度 */
    border-collapse: collapse; /* 可选：合并表格边框，优化视觉效果 */
}

.circle {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    border-radius: 50%; /* 实现圆形效果 */
    background-color: #ff4444; /* 设置圆形背景色 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* 鼠标悬停显示手型，提示可点击 */
}

.circle span {
    color: white;
    font-size: 16px;
    line-height: 1;
}

关键修改说明 #

• 保留父容器的position:relative：确保右上角的关闭按钮始终相对于当前元素定位，不会脱离元素范围。
• 移除表格的绝对定位：让表格正常占据文档流空间，父容器会被表格撑开高度，多个元素就能依次向下排列，不会重叠。
• 完善.circle样式：通过宽高、圆角实现圆形，用flex布局让X完美居中，同时添加交互提示提升用户体验。

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