如何让Check按钮可点击？输入框遮挡导致按钮点击失效问题

核心问题在于：transform: translateX(-70px)仅改变了输入框的视觉显示位置，它的实际布局占位（点击交互区域）仍停留在原始位置。再加上输入框默认z-index:2高于按钮的z-index:1，导致即使按钮视觉上露出来，点击时实际触发的是输入框的透明区域，而非按钮。

以下几种方法可解决该问题，按需选择即可：

方法1：用left属性代替transform移动输入框 #

直接修改输入框的布局位置，让交互区域和视觉位置同步移动：

.search-input:focus{
    outline: none;
    /* 替换transform为left */
    left: -70px;
}

这种方法最直接，输入框的交互区域与视觉位置完全匹配，不会出现点击穿透问题。

方法2：聚焦时让输入框不接收点击事件 #

当输入框聚焦时，设置pointer-events: none让点击穿透到下方按钮，同时点击按钮后取消输入框聚焦（避免后续无法再次激活输入框）：

.search-input:focus{
    outline: none;
    transform: translateX(-70px);
    pointer-events: none;
}

修改JS函数：

function fetch(){
    alert('Clicked');
    // 点击按钮后让输入框失去焦点，恢复交互能力
    document.querySelector('.search-input').blur();
}

方法3：聚焦时降低输入框层级 #

当输入框左移后，将其z-index设为低于按钮，让按钮成为可交互的顶层元素：

.search-input:focus{
    outline: none;
    transform: translateX(-70px);
    z-index: 0;
}

这种方法保留transform的动画效果（若需要），同时确保按钮能接收点击。

HTML #

<div class='fetch-container'>
  <div> 
    <input class='search-input' type='text' placeholder='Please Enter your City'/>
    <button type='submit' class='search-button' onClick="fetch()">Check</button>
  </div>
</div>

CSS #

.fetch-container{
    margin: 20px;
    position: fixed;
    top : 50vh;
    left: 45vw;
}

body{
    background-color: rgb(223, 222, 222);
}

.search-input{
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 10px;
    border-radius: 25px;
    border-style: none;
    z-index: 2;
    /* 可选：添加过渡动画让移动更平滑 */
    transition: left 0.3s ease;
}

.search-input:focus{
    outline: none;
    left: -70px;
}

.search-button{
    position: absolute;
    top: 0px;
    left: 70px;
    padding: 10px 5px 10px 50px;
    border-radius: 25px;
    border-style: none;
    width: 120px;
    z-index: 1;
}

.search-button:hover{
    background-color: #FFC26F;
}

JS #

function fetch(){
    alert('Clicked');
}

内容的提问来源于stack exchange，提问作者Rex DSouza