HTML中消失的按钮

我写了一个简单的输入字段，里面有一个按钮。代码如下。

form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

如您所见，当我点击输入字段时，按钮消失。当我在该表单外部单击时，它会重新出现。但是我不希望它在点击输入字段时消失。我怎样才能做到这一点？

4
投票

在焦点时使用z-index

 input:focus ~ .btn-primary {
     z-index: 100;
 }

form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}

 input:focus ~ .btn-primary {
     z-index: 100;
 }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

7
投票

在z-index: 1元素上设置#srch-term

4
投票

将qazxsw poi CSS规则中的qazxsw poi更改为qazxsw poi。

z-index

2
投票

只需给你按钮的.add-on button更高的价值。可能是输入的亮点，它将div放在上面

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 3;
  font-size: 14px;
  padding: 5px;
}

0
投票

你应该将z-index设置为按钮

form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 5;
  font-size: 14px;
  padding: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

0
投票

正如其他人所说，输入字段在聚焦时覆盖按钮。尝试在输入和按钮上设置永久z-index，并使按钮的z-index高于输入。

position: relative

form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: relative;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}

0
投票

如果我将z-index：1添加到输入并且z-index：3添加到按钮，则问题就消失了。无法弄清楚为什么但是按钮上的z-index：2似乎不起作用。

0
投票

只需添加<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="navbar-form my-2 my-lg-0 ml-auto" role="search"> <div class="input-group add-on"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> <button class="btn btn-primary" type="submit">Search</button> </div> </form>即可输入。该值大于-1且小于按钮form { width: 50%; } /* Style the search field */ .add-on { position: relative; } .add-on input { width: 100%; border-radius: 0; z-index: 1020; } .add-on button { position: absolute; border-radius: 0; top: 2px; right: 3px; height: 33px; width: 60px; z-index: 2; font-size: 14px; padding: 5px; z-index: 1021; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

0
投票

解决方案1 - 在z-index中将z-index更改为/* Style the search field */ .add-on input { width: 100%; border-radius: 0; z-index: 0 } .add-on button { position: absolute; border-radius: 0; top: 2px; right: 3px; height: 33px; width: 60px; z-index: 2; font-size: 14px; padding: 5px; } ，但如果您的内容增加，搜索按钮将与内容重叠。

z-index: 2

z-index: 3

解决方案2 - 从.add-on button删除form { width: 50%; } /* Style the search field */ .add-on { position: relative; } .add-on input { width: 100%; border-radius: 0; } .add-on button { position: absolute; border-radius: 0; top: 2px; right: 3px; height: 33px; width: 60px; z-index: 3; font-size: 14px; padding: 5px; }，<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <form class="navbar-form my-2 my-lg-0 ml-auto" role="search"> <div class="input-group add-on"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> <button class="btn btn-primary" type="submit">Search</button> </div> </form>，position: absolute，top: 2px并在right: 3px中将z-index: 2更新为.add-on button，它将在输入字段旁边显示搜索，并且它不会重叠内容。

height: 33px;

height: 38px;

JAVA c c++go swift javascript Nginx UI/UE 小程序 Python C#php asp

热门推荐