div 就像 html 中的下拉菜单

Question

我制作搜索栏，在其中制作过滤器以准确搜索。 其中我给出了三个值areaUnit面积和价格。 但它只是扰乱了立场。 我只希望过滤器 div 像下拉菜单一样工作。 过滤器 div 就像一个下拉菜单，我在其中放置了其他输入值。 它只是像下拉菜单一样滑动。 我试过了。

<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>

看法：

Answer 1

1. 添加position: relative对于您的.wrap类。 这将允许这个 div 成为任何绝对定位的子元素的父元素。
2. 将position: absolute添加到您的filter div。 现在这会将您的过滤器 div 重新定位在搜索栏的顶部（或下方），因为绝对位置将忽略它周围的其他元素。 要准确地重新定位，请使用 add top: 20px; （将 20px 更改为任何合适的值，以将过滤器准确定位在搜索栏下方）