絕對定位重疊div

關於這個話題有相當多的話題，但沒有一個解決了我的問題。絕對定位重疊div

<div class="outer"> <!-- fixed height --> 
    <div class="inner">content</div> <!-- needs to be placed AFTER outer --> 
</div> 
<!-- the inner div should be placed here with css AND NOT overlap any of the following content --> 
<div>no overlap please</div>

outer有一個確切的高度，同時inner高度取決於它的內容。我需要移動inner後outer容器; 沒有它重疊以下內容。由於我不知道inner div的高度，因此我不能只使用outer上的margin。

如果問：結構必須是這樣的。這是一個自舉傳送帶，我需要將傳送帶的指示器放在底部 - 指示器需要位於滑塊div內。

編輯：問題不在於如何在該outer容器的底部得到inner容器。通過絕對定位並將其設置爲底部的問題是，內容與即將到來的div相重疊。

任何想法？謝謝！

來源

2016-12-12 nehalist

那麼，什麼是你的問題？你嘗試了什麼，它沒有奏效。 –

查看編輯的問題。 – nehalist

我能想到以下幾點：

.outer {postion:relative;} 
.inner { 
    position: absolute; 
    top: 100%; 
}

這將顯示.outer後.inner。如果這不是你的意思，你可能想嘗試用jQuery來移動元素。請讓我知道，我會盡力幫助。

編輯：

如果必須是動態的，我想你應該使用JavaScript，或者至少我不熟悉的CSS任何其他方式。請看到的jsfiddle使用jQuery工作的例子：https://jsfiddle.net/r6hskbn3/3/

來源

2016-12-12 10:36:23

問題不在於如何將div從其父項中取出，而是重疊是問題所在。查看編輯。 – nehalist

請參閱上面的更新評論 –

您需要頂部位置設置爲100％，這個

.inner { 
    position: absolute; 
    top: 100%; 
}

來源

2016-12-12 10:41:13

絕對定位重疊div

回答

相關問題