如何解决自定义样式checkbox因position属性溢出覆盖其他元素的问题

自定义复选框出现溢出覆盖其他元素的核心原因是：设置了position: absolute的::before/::after伪元素没有对应的相对定位父容器，定位基准默认是全局视口，同时你的label标签本身没有占位宽高，伪元素完全脱离文档流，不会撑开父容器高度，自然会和其他页面元素重叠。

• 给label标签添加相对定位、占位尺寸与内边距，让其成为伪元素的定位基准，同时在文档流中占据对应位置，避免和其他元素重叠
• 调整伪元素的定位偏移，让复选框样式和label对齐
• 给label添加行高适配，保证文字和复选框垂直对齐（如果label内有文字的话）

/* 新增label基础样式 */
label {
    position: relative;
    display: inline-block;
    padding-left: 1.8em; /* 给复选框预留位置，避免文字和复选框重叠 */
    min-height: 1.4em; /* 撑开label高度，和复选框高度匹配 */
    line-height: 1.4em; /* 文字和复选框垂直对齐 */
    cursor: pointer; /* 鼠标hover显示手型，提升交互体验 */
}

label::before {
    content: "";
    border: solid 1px #FF6E0B;
    position: absolute;
    left: 0; /* 对齐label左侧 */
    top: 0; /* 对齐label顶部 */
    width: 1.4em;
    height: 1.4em;
    border-radius: 3px;
}

input[type=checkbox] {
    display: none !important;
}
.checkbox-titles [type=checkbox]:checked + label:after {
    /* check */
    font-family: "Font Awesome 5 Free";
    color: #fff;
    content: "\f00c";
    font-weight: 900;
    line-height: 1.4em;
    text-align: center;
    /* 定位设置 */
    position: absolute;
    left: 0; /* 对齐label左侧 */
    top: 0; /* 对齐label顶部 */
    width: 1.4em;
    height: 1.4em;
    border-radius: 3px;
    background-color: #FF6E0B;
}

修改后复选框的自定义样式会完全跟随label的位置移动，label本身在正常文档流中占据对应宽高，不会出现脱离布局、覆盖其他元素的问题，点击label区域也可以正常触发复选框的选中/取消选中状态。如果需要展示复选框对应的选项文字，直接写入<label>标签内部即可，样式会自动适配，文字不会和自定义复选框重叠。

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