我的输入栏和搜索在提交空输入时移到另一个位置

Question

如果我没有在输入栏中放任何东西或结果为空，则整个输入栏将移至另一个位置，搜索按钮也将移至其他位置。有什么办法可以解决这个问题？

我尝试弄乱CSS，但是没有用。我尝试使用display: block和position: absolute，但仍然无法正常工作。我显示的表格是否会导致这种情况？

.searchCon {
  border: 3px red solid;
  position: absolute;
  left: 0;
  width: 100%;
  height: 70%;
  top: 25%;
}

.searchCon form {
  border: 3px red solid;
  position: absolute;
  left: 25%;
  top: 5%;
  width: 50%;
  height: 5%;
}

.searchCon #searchBar {
  position: absolute;
  left: 0%;
  top: 0%;
}

table {
  position: absolute;
  z-index: 100;
  height: 20%;
  width: 50%;
  left: 25%;
  top: 50%;
  text-align: center;
  font-family: 'Maven Pro', sans-serif;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.7);
  color: white;
}

<div class="searchCon">
  <form method="POST">
    <input type="text" name="search" id="searchBar" />
    <select name="category" class="form-control">
      <option>Category</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <input type="submit" name="submit" value="search" />
  </form>
</div>