如何創建覆蓋底部內容面板？

Question

我有一個div需要創建一個底部內容面板，有點像Devtools，它出現在頁面的底部，佔用整個屏幕寬度，但是在當前頁面的任何位置上。

#panel { 
position:absolute; 
bottom:0%; 
width: 100%; 
height: 25%; 
z-index:500; 
} 

然而，這個小組似乎壓扁和內部#paneldiv內容沒有顯示出來。

Answer 1

你實際上真的很接近實現這一切，你需要的只是兩個調整。

將position: absolute;更改爲position: fixed;以便您的面板在整個頁面中保持相同的位置。

我也推薦使用bottom: 0px;而不是bottom: 0%;，因爲如果你需要改變某些東西，它會給你更多的控制權。

最後但並非最不重要，您需要添加left: 0px;來設置其位置。

因此，最終的CSS應該是這樣的：

#panel { 
    position: fixed; 
    bottom: 0px; 
    Left: 0px; 
    width: 100%; 
    height: 25%; 
    z-index:500; 
} 

Answer 2

Here是你問的基本版本。

使用下面的CSS

position: fixed; 
background-color: white; 
border-top: 1px solid #ddd; 

位置絕對不會讓你的DIV固定，滾動時，它相應地移動。所以使用固定的位置，它不會滾動並且設置背景顏色，否則後面的內容會重疊，並且看起來像透明。爲了避免它，使用background-color css屬性。

Answer 3

將absolute更改爲fixed應該訣竅。