如何讓此搜索結果div顯示在內容之上，而不會干擾附近的浮動元素？

我有一個棘手的佈局，我試圖添加類型到搜索。（實際的代碼使用角，但它看起來像我的問題只是CSS）如何讓此搜索結果div顯示在內容之上，而不會干擾附近的浮動元素？

在一個單一的TD，也有偏右（描述性標籤兩個浮動位，和一個按鈕與標籤無關）。 TD的主要部分是一個文本輸入，佔用了空間的其餘部分。我試圖通過使其顯示一個帶有低於它的搜索結果的div來增強輸入，覆蓋輸入下的東西。

我遇到的問題是包含輸入的div是溢出：auto，所以當搜索結果顯示時，它們只是向輸入div添加一個滾動條（如果滾動，搜索結果可見），而不是在其他內容上顯示搜索結果。我可以通過將溢出更改爲其他內容來解決此問題，但是右側的兩個浮動元素決定避開輸入。

我怎樣才能讓搜索結果顯示在較低的內容，而不是陷入輸入格與滾動條？理想情況下，我希望搜索結果與輸入一樣寬（這將是可變的），但是我的第一個問題是僅僅讓搜索結果顯示出來，而沒有在浮動元素周圍推動或推動結果一個滾動條。

HTML：

<div style="width:600px;"> 

    <input type="button" value="Button!" style="float:right; width:100px;"/> 

    <span style="float:right"> Category </span> 
    <div class="inputRow"> 
    <input type="text" id="input"/> 
    <div class="searchResults"> 
     Results! 
    </div> 
    </div> 
</div> 
<div style="width:600px;"> 
    There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.) 
</div>

CSS：

.searchResults { 
    position:absolute; 
    top:100%; 
    background-color: white; 
    border: 1px solid black; 
    z-index: 50; 
    display: none; 
} 

.inputRow { 
    position:relative; 
    overflow:auto; 
} 

input { 
    width: 98%; 
} 

div { 
    z-index: 0; 
}

JS：

$("#input").change(function() { 
    $(".searchResults").show(); 
});

來源

2016-03-04 PotatoEngineer

添加**的div {z-index的：0;}：（從.searchResults CSS類100％，我刪除了頂部。）**你的CSS文件。 –

@ArifBurhan，這不能解決任何問題，但爲了完整起見，我會添加它。 – PotatoEngineer

看來你需要使用固定的，而不是position:absolute位置，並指派top:7%它會奏效。這是一種方式。仍然無法弄清楚爲什麼position:absolute不工作。我還處於學習階段。

.searchResults { 
    position:fixed; /* instead of : position:absolute;*/ 
    top:7%;   /* instead of : top:100%;*/ 
    background-color: white; 
    border: 1px solid black; 
    z-index: 50; 
    display: none; 
}

小提琴這裏：https://jsfiddle.net/nithin_krishnan/dowxw1dz/5/

來源

2016-03-04 04:11:27 Kailas

該sorta工程，但位置：固定使內容固定在屏幕上。因此，如果頁面滾動，搜索結果仍然在屏幕上的相同位置，但不在相對於其餘內容的相同位置。我使用的HTML片段實際上在頁面上重複多次，所以這種解決方案對我來說不起作用。 – PotatoEngineer

的解決方案是簡單地忽略輸入元素，並把結果輸入下面的內容，來代替。

不幸的是，這意味着設置寬度必須用JavaScript來完成，而不是簡單地依靠CSS來做正確的事情。我最終使用$（「。searchResults」）.width（$（「input」）.width（））來使結果的寬度與輸入的寬度相匹配。

https://jsfiddle.net/dowxw1dz/7/

<div style="width:600px;"> 

    <input type="button" value="Button!" style="float:right; width:100px;"/> 

    <span style="float:right"> Category </span> 
    <div class="inputRow"> 
    <input type="text" id="input"/> 
    </div> 
</div> 
<div style="width:600px; position:relative;"> 
    <div class="searchResults"> 
    Results! 
    </div> 
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.) 
</div>

來源

2016-03-10 22:36:03 PotatoEngineer

如何讓此搜索結果div顯示在內容之上，而不會干擾附近的浮動元素？

回答

相關問題