Input field wont function (Can't type text in it)

问题

I have a search box which slides out when you click on a div but it wont let me put any text in and I can't find a reason why.

$('#searchh').click(function() {
  $('.search-button').animate({
    'left': '520px'
  });
});

$('#searchh').click(function() {
  $('.search-balk').animate({
    'width': '295px'
  });
});

.search-button {
  position: absolute;
  left: 225px;
  margin-top: -30px;
  z-index: -1;
  -webkit-transition: background-position 0.8s, color 1s;
  -moz-transition: background-position 0.8s, color 1s;
  transition: background-position 0.8s, color 1s;
}
.search-balk {
  position: absolute;
  right: 50px;
  height: 71px;
  width: 260px;
  background-color: #000;
  border: none;
  padding-left: 10px;
  color: #fff;
  z-index: 33;
}

<div class="search-button">
  <input class="search-balk" type="text" name="search" placeholder="Vul hier je zoekwoord in...">
  <img src="/assets/images/search.png" />
</div>

回答1:

Remove .search-button { /* position: absolute; */ }

and you see what the problem is try to make a div on top of it and gief it position relative.

来源：https://stackoverflow.com/questions/31269764/input-field-wont-function-cant-type-text-in-it