CSS列表标记默认基于内容区左边缘定位，不受padding和relative影响；用list-style-position:inside可使标记随文字缩进，outside则需手动预留空间并调整text-indent；避免对li设relative，优先用margin或伪元素替代。

列表标记（如 disc、circle、square）默认出现在行框左侧，但一旦给 li 设置了 position: relative 或内边距（padding），标记位置常会偏移、错位甚至被裁切。核心原因是：CSS 列表标记的定位不随 padding-left 或相对定位移动，它始终基于内容区左边缘计算，且不受 left/top 影响。

用 list-style-position: inside 控制标记归属区域

默认值 outside 会让标记脱离内容流，独立于 padding；设为 inside 后，标记成为内容的一部分，会响应 padding-left，并随文字一起缩进：

• li { list-style-position: inside; padding-left: 20px; } —— 标记紧贴文字左侧，整体向右缩进
• 适合需要精确控制文本起始位置的场景（如对齐段落首行）
• 注意：inside 下标记可能被长文本换行覆盖，必要时加 text-indent 或调整行高

用 padding-left 配合 list-style-position: outside 手动留白

保留默认 outside 更稳妥（避免换行干扰），但需手动为标记预留空间：

• li { list-style-position: outside; padding-left: 30px; }
• 再通过 text-indent: -15px; 把文字左移，让第一行文字与标记对齐
• 等效于：标记在 0px 处渲染，文字从 15px 开始，视觉上对齐

避免对 li 直接设 position: relative 干扰标记

relative 不影响标记位置本身，但若同时设置了 left 或 transform，会导致内容位移而标记不动，造成错位：

• 方案一：把相对定位移到内部 span 或 p 上，li 保持静态定位
• 方案二：改用 margin-left 替代 left 实现水平偏移，不影响标记逻辑
• 方案三：彻底放弃原生标记，用伪元素 ::before 自定义图标 + 绝对定位，完全可控

检查父容器 overflow 和字体渲染干扰

有时标记“消失”并非定位问题，而是被裁剪或渲染异常：

• 确认 ul 或 li 没有 overflow: hidden，尤其配合 padding 使用时
• 某些字体（如中文字体）下 list-style-type 渲染异常，可换用 list-style-image 或 SVG
• 移动端 WebKit 内核偶有标记偏移，加 li { vertical-align: top; } 可缓解