In the block with position: relative; form does not work. What is wrong and how to fix it?

.block-search { z-index: -1; height: 370px; width: 100%; background: url(../img/block-search.png) center no-repeat; background-size: cover; position: relative; } .block-search:before { z-index: -1; position: absolute; left: 0; top: 0; content: ""; height: 370px; width: 100%; background: rgba(0, 0, 0, 0.71); } .block-search:after { z-index: -1; position: absolute; left: 0; top: 0; content: ""; height: 370px; width: 100%; background: url(../img/block-search1.png); } .block-search h1 { box-sizing: border-box; padding-top: 55px; margin: 0; width: 100%; text-align: center; font-family: "GothamProMedium"; color: #fff; } 

 <div class="block-search"> <h1>What are you looking for?</h1> <form action="#" method="get" class="form-search"> <select name="city" id="city"> <option value="dubay">Dubay</option> <option value="curitiba">Curitiba</option> <option value="vancouver">Vancouver</option> <option value="reykjavik">Reykjavik</option> <option value="oregon">Oregon</option> <option value="london">London</option> </select> <input type="submit" value="otpr"> </form> </div>