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; }可缓解
