Font Awesome图标z-index不生效：按钮点击态图标显示不全求助

嘿，我来帮你排查这个图标显示不全的问题～调z-index没用的话，大概率不是层级的问题，而是容器布局或者图标本身的尺寸/定位出了问题，咱们一步步来解决：

可能的原因&对应解法 #

1. 按钮容器的overflow属性遮挡了图标 #

先检查你的.sta_tus类有没有设置overflow: hidden——如果有的话，图标一旦超出按钮的60px高度/150px宽度范围，就会被裁切。

• 解法：如果不需要隐藏溢出内容，直接去掉overflow: hidden；如果必须保留，就调整图标尺寸或者按钮内边距，让图标完全在容器内。

2. 图标尺寸或位置没适配按钮大小 #

Font Awesome图标本质是字体，所以可以通过调整字体大小、对齐方式来适配按钮：

• 给图标元素（比如#status1）设置合适的font-size，比如1.5em，同时加上line-height: 60px（和按钮高度一致）让它垂直居中；
• 给图标加text-align: center确保水平居中，避免偏移出容器。

3. 按钮的内边距挤压了图标空间 #

如果按钮设置了过大的padding，会占用图标可用的空间。检查你的.sta_tus CSS里的padding值，比如如果左右padding加起来超过30px，那图标可用宽度就只剩120px了，可能不够显示完整图标。

• 解法：适当减小按钮的padding，或者增大按钮宽度，给图标留出足够空间。

4. 图标元素的定位问题 #

如果#status1用了绝对定位，一定要确保它的位置在按钮容器内：

• 给按钮.sta_tus设置position: relative，然后给#status1设置position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);，这样图标会完全居中在按钮里，不会偏移出去。

调整后的示例代码 #

结合你的现有代码，修改后大概是这样：

.sta_tus {
  font-size: 14pt;
  font-weight: 300;
  color: #005a84;
  background-color: #d5e2ed;
  border-radius: 0px;
  border: 2px solid deepskyblue;
  height: 60px;
  width: 150px;
  /* 加上相对定位，方便绝对定位的图标居中 */
  position: relative;
  /* 去掉overflow:hidden（如果之前加了的话） */
  /* overflow: hidden; */
}

#status1 {
  visibility: hidden;
  font-size: 1.8em; /* 调整图标大小适配按钮 */
  line-height: 60px; /* 和按钮高度一致，垂直居中 */
  text-align: center;
  width: 100%; /* 占满按钮宽度，避免偏移 */
  /* 如果用绝对定位的话： */
  /* position: absolute; */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
}

function onClick(ele) { 
  document.getElementById('status1').style.visibility = 'visible'; 
}

你可以先试试去掉overflow:hidden（如果有的话），然后调整图标的字体大小和对齐方式，应该就能解决显示不全的问题啦～

内容的提问来源于stack exchange，提问作者Keerthi Reddy Yeruva