Jquery z-index or focus/active bug

Question

i want input element to be Hidden be it's default, and work as same as it's working now.i want input element to be Hidden be it's default, and work as same as it's working now.i want input element to be Hidden be it's default, and work as same as it's working now.i want input element to be Hidden be it's default, and work as same as it's working now.i want input element to be Hidden be it's default, and work as same as it's working now.i want input element to be Hidden be it's default, and work as same as it's working now.i want input element to be Hidden be it's default, and work as same as it's working now.i want input element to be Hidden be it's default, and work as same as it's working now.i want input element to be Hidden be it's default, and work as same as it's working now.

$("#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>