div 就像 html 中的下拉菜单

Question

I make search bar in which I make filter to search accurately. In which I give three values areaUnit area and price. But it just disturb the position. I just want that the filter div act like a dropdown. The filter div act like a dropdown menu in which I put other input values. It just slide like a dropdown. I tried this.

<form>
                    <div class="wrap">
                        <div class="search">
                            <input type="text" class="searchTerm" style="width: 700px; color:#000000; text-align: left;" placeholder="Search Houses" onclick="filterfunction()">
                            <button type="submit" class="searchButton" >
                                <i class="fa fa-search"></i>

                            </button>
                        </div>
                        
                        <div  id="filter" style="display:none; background-color:#D3D3D3;border:1px; border-style:solid; border-color:black; border-radius:5px">
                            <label for="price"style=" margin-left:75px;border:none" >Area Unit</label>
                        <label for="price"style=" margin-left:30px;border:none " >Area</label>
                            <label for="price" style=" margin-left:70px;border:none">Price</label>
                        <div>
                        <select asp-for="Input.areaunit"  style="height :50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:100px;">
                            <option value="" hidden>Select area Unit</option>
                            <option value="Kanal">Kanal</option>
                            <option value="Marla">Marla</option>
                            <option value="Square Feet">Square Feet</option>
                            <option value="Square Meter">Square Meter</option>
                            <option value="Square Yards">Square Yards</option>
                        </select>
                        
                            
                           
                                
                                <input list="Input.area.list"asp-for="Input.area" placeholder="Please Select area" style="height :50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:20px;">
                                <datalist id="Input.area.list">
                                    <option value="10"></option>
                            <option value="12"></option>
                            <option value="15"></option>
                            <option value="20"></option>
                            <option value="25"></option>
                            <option value="30"></option>
                            <option value="35"></option>
                            
                                </datalist>
                        
                       
                            
                           
                         <input type="hidden" name="Input.price" id="Input.price"asp-for="Input.price" />
<!-- Hidden field above-->

                                <input list="Input.price.list" id="rsInput" placeholder="Please Select price" style="height :50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:20px;">
                                <datalist id="Input.price.list">
                          <option value="5,00,000"></option>
                          <option value="10,00,000"></option>
                          <option value="15,00,000"></option>
                          <option value="20,00,000"></option>
                          <option value="25,00,000"></option>
                          <option value="30,00,000"></option>
                          <option value="35,00,000"></option>
                          <option value="40,00,000"></option>
                          <option value="45,00,000"></option>
                          
                         </datalist>
                          
                            </div>
                          </div>
                      
                        
                    </div>
                    
                    
                </form>

View:

Answer 1

1. Add position: relative to your .wrap class. This will allow this div to become a parent of any absolutely positioned child.
2. Add position: absolute to your filter div. Now this will reposition your filter div on top (or below) your search bar because position absolute will ignore the other elements around it. To reposition it accurately, use add top: 20px; (change the 20px to whatever fits to accurately position your filter under your search bar)