jQuery Z-index或焦点/活动错误

Question

我希望输入元素是默认的，并且与现在一样工作。我希望输入元素是默认的，并且与现在一样工作。我希望输入元素是隐藏的是默认值，并且与现在一样工作。我希望输入元素为默认值，并且与现在一样工作。我希望输入元素为默认值，并且它与默认值一样工作现在要工作。我希望输入元素是默认的，并且与现在一样工作。我希望输入元素是默认的，并且与现在一样。我希望输入元素被隐藏。是默认值，并且与现在一样工作。我希望输入元素被隐藏，因为它是默认，并且与现在工作一样。

$("#Get").click(function( e ) {
   e.stopPropagation();
   $(".search-control").toggle();
});
$(".search-control").on('click',function( e ){
     e.stopPropagation();
});
$(document).on('click', function( e ) {
   if( e.target.class != 'search-control' ){
       $(".search-control").hide();
   }   
});

#Get {
  position: absolute;
  background: #333333;
  width: 304px;
  height: 10%;
  left: 48px;
  color: lime;
  display: flex;
  align-items: center;
}
#Get:hover {
  background: #4c4c4c;
}
.search-control {
  position: absolute;
  background: #333333;
  width: 344px;
  height: 10%;
  left: 48px;
  bottom: 0px;
  display: flex;
  align-items: center;
}
input#searchbar {
  position: absolute;
  background: #f3f3f3;
  width: 344px;
  height: 100%;
  border: none;
  font-size: 15px;
  bottom: 0px;
  padding: 10px;
  text-indent: 30px;
  font-family: "Segoe UI", sans-serif;
  display: flex;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="Get">
    <span class="c-icon"></span>
    <p class="t-search">Click here to search, i want to go in Front.</p>
  </span>
  <div class="search-control">
      <span class="s-icon"></span>
        <input type="search" id="searchbar" name="q" placeholder="Type here to search" value="I want to hided by default">
      <span id="c-mic"></span>
    </div>

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

#searchbar{
  display: none;
  }

 <div class="search-control">
      <span class="s-icon"></span>
        <input type="search" id="searchbar" name="q" placeholder="Type here to search" value="I want to hided by default">
      <span id="c-mic"></span>
    </div>