如何让输入框的聚焦轮廓层级高于图标盒子的box-shadow？

云上老周

2026-9-27

解决方案

z-index 属性仅对设置了非static定位的元素生效，你当前给输入框设置的z-index:100未生效，因为输入框默认是静态定位，所以层级低于设置了position: absolute的箭头图标容器，导致聚焦边框被阴影遮挡。

修改步骤

给#main-input新增position: relative属性，激活z-index设置：

#main-input{
  width: 400px;
  height: 30px;
  border: 2px solid lightgray;
  border-radius: 30px;
  z-index: 100;
  /* 新增以下代码 */
  position: relative;
}

（可选）如果仍有层级异常，给#arrow-icon明确设置低于输入框的z-index值即可：

#arrow-icon{
  width: 90px;
  height: 52px;
  position: absolute;
  background:linear-gradient(to right, hsl(0, 80%, 86%) 0%, hsl(0, 74%, 74%) 100%)  ;
  margin-top: 35px;
  margin-left: -91px;
  border-radius: 30px;
  box-shadow: 3px 16px 10px 0px #f4dddd;
  cursor: pointer;
  /* 新增以下代码 */
  z-index: 99;
}