按钮文本被遮挡主因是布局层叠或定位冲突，包括z-index不当、overflow:hidden裁剪、块级标签未处理堆叠上下文、浮动/定位覆盖及移动端键盘弹出导致视口计算错误。
button元素内部文本被遮挡的常见原因
按钮文字被遮住，不是字体颜色问题，也不是CSS透明度设错，而是布局层叠或定位冲突导致上层内容压住了按钮文本。典型场景包括：position: relative + z-index 组合不当、父容器overflow: hidden裁剪、或<button></button>里嵌套了<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill3458" title="html-ppt-to-pdf">html-ppt-to-pdf</a>
<p>将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>等块级标签却没处理堆叠上下文。
修复<button><p>text</p></button>文本遮盖
当在<button></button>内用<p></p>包裹文字时，<p></p>默认是块级元素，若同时设置了position: relative但未配z-index，它可能被按钮自身的伪元素或背景图层覆盖。
- 给
<p></p>加position: relative和z-index: 1，确保它在按钮内容层最上方 - 避免在
<button></button>上设置overflow: hidden，否则会裁掉子元素的定位偏移 - 更稳妥的做法是不用
<p></p>——直接写<button>text</button>，或用<span></span>替代<p></p>（语义正确且无默认外边距干扰）
排查浮动/定位导致的视觉遮挡
如果按钮本身能看见，但点击区域失效或文字局部模糊，大概率是相邻元素（比如上一个div或input）因float或margin-top产生了意外的层叠覆盖。
立即学习“前端免费学习笔记（深入）”；
- 在开发者工具中悬停按钮，看高亮框是否被其他元素“穿透”覆盖
- 临时给疑似遮挡元素加
outline: 2px solid red快速定位 - 移除
float: right类，改用display: flex+justify-content: flex-end控制对齐，避免浮动塌陷引发的层叠错乱
移动端键盘弹出时按钮被顶起或遮挡
安卓部分版本（尤其是4.x–5.x）在软键盘弹出时，会错误计算视口高度，导致底部按钮被顶出可视区，或输入框上浮后遮住下方按钮。
- 监听
resize事件，在键盘弹起时调用document.activeElement.scrollIntoViewIfNeeded() - 对关键按钮（如提交）添加
scroll-margin-bottom: 60px，预留键盘高度空间 - 避免给
body或html设height: 100%，这在键盘弹出时会强制截断内容
overflow: hidden把定位后的子元素切掉了——得先关掉这个属性再判断是不是真被盖住了。 
