How to make z-index to work?

Question

i'm editing an Angular project and i'm trying to fix the following feature:

I would obtain the following behavior:

Here is the HTML code:

    <div class="search-function" ng-click="showInputForm()">
      <img src="../images/my_project/search.png">
    </div>

    <div class="search-form" ng-if="showForm">
      <form ng-submit="textSearch()">
        <input type="text" autofocus class="search-input" ng-model="text.value" />
      </form>
    </div>

As you can see the white box appears when users click on the search icon but it should appear on the icon, instead of under it. How to overlap it to the search icon?

Here is the LESS code:

.search-function {
  margin-left: 30%;
}

.search-form {
  padding-left: 15%;
  padding-right: 15%;

  .search-input {
    color: #2b84a6 !important;
    background-color: #fff !important;
    font-weight: 300;
    font-size: 16px;
  }
}

I tried to set z-index: -1 to search-function class, but it doesn't work. What's wrong?

Answer 1

z-index only applies to positioned elements. Since you haven't changed the value of the position property away from the default ( static ) it is not positioned so z-index will have no effect. Set position: relative .