不擴展父級的絕對定位

Question

我正在嘗試 position 一個 div 元素中的“搜索器”，其中包含其他元素。 我希望搜索者能夠在內容 div 之上移動，而無需推動其他內容，同時也跟隨滾動條。 該區域可調整大小，因此我不能使用恆定的寬度/高度。 就像視頻編輯器中的搜索器一樣。

這是我到目前為止所得到的

 #container { width: 200px; height:100px; background-color: gray; overflow: scroll; } #content { width: 300px; height: 120px; } #box { width: 40px; height: 40px; background-color: green; } #seekerContainer { position: relative; width: 100%; height: 100%; } #seeker { width: 4px; height: 100%; position: relative; background-color: blue; left: 10%; }

 <div id="container"> <div id="content"> <div id="seekerContainer"> <div id="seeker"></div> </div> <div id="box"></div> </div> </div>

而且我嘗試了不同的組合，其中 seekerContainer 和 seeker 是 position 絕對/相對，但是搜索者不會跟隨滾動，或者它會擴展 div 的高度。

任何解決此問題的指針？

Answer 1

我認為這就是你要找的：

 .container { width: 200px; height: 100px; background-color: gray; overflow: scroll; }.content { height: 500px; position: relative; }.box { width: 40px; height: 40px; background-color: green; }.seeker { width: 4px; height: 100%; position: absolute; background-color: blue; left: 10%; top: 0; }

 <div class="container"> <div class="content"> <div class="seeker"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>

此外，您不想將id放在每個元素上並使用id進行樣式設置。 你應該為此使用classes 。 元素的 ID 對於頁面必須是唯一的，因此當您需要將相同的樣式應用於更多元素時它不是很有用。