CSSレンダリングの位置と改行

Question

検索結果のボックスのスタイリングに大きな問題があります。 私はちょうど入力ボックス（検索）の下に置くことはできませんし、かなり良い方法で結果を表示します。それはすべて混乱しており、入力ボックスの下には配置されていません。すべての結果は他のものよりも上です。 （写真では結果は左下にあります）

マイHTML：

    <li> 
        <form role="search" class="app-search hidden-sm hidden-xs m-r-10" class="searchb"> 
         <div class="search-box"> 
         <input type="text" placeholder="Search..." class="form-control" id="search" name="search"> <a href=""><i class="fa fa-search"></i></a> 
         <div class="results"></div></div> 
        </form> 
       </li> 

マイCSS：

.search-box .results{ 
position:absolute; 
} 
.search-box .results a{ 
    padding: 5px 10px; 
    max-height: 400px; 
    overflow: auto; 
    position: absolute; 
    z-index: 990; 
} 

私のPHPコードは、このような結果が出力されます。

   while($row_data = $stmt_result->fetch_assoc()) { 
       echo "<a href='index.php?id=prt&c=$row_data[id]'>$row_data[name]</a>"; 
      } 

その重要なのは、私の結果は、JSとフェッチされた場合：

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.search-box input[type="text"]').on("keyup input", function(){ 
    /* Get input value on change */ 
    var inputVal = $(this).val(); 
    var resultDropdown = $(this).siblings(".results"); 
    if(inputVal.length){ 
    $.get("search.php", {term: inputVal}).done(function(data){ 
     // Display the returned data in browser 
     resultDropdown.html(data); 
     }); 
    } else{ 
     resultDropdown.empty(); 
    } 
}); 
// Set search input value on click of result item 
$(document).on("click", ".result p", function(){ 
    $(this).parents(".search- 
box").find('input[type="text"]').val($(this).text()); 
    $(this).parent(".results").empty(); 
}); 
}); 
</script> 

誰かがそれが権利を取得しようとしている私を助けることができますか？

Answer 1

aタグを絶対位置に指定しているため、互いに重なり合うように配置されています。それぞれを独自の行にスタックしたい場合は、position:relative;とdisplay:block;とします。

.search-box .results a{ 
    padding: 5px 10px; 
    max-height: 400px; 
    overflow: auto; 
    position: relative; 
    z-index: 990; 
    display:block; 
}