如何创建覆盖底部内容面板？

Question

我有一个div需要创建一个底部内容面板，有点像Devtools，它出现在页面底部，占据屏幕的整个宽度，但是无论如何在当前页面上。

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

然而，该小组似乎被压扁，#panel div内的内容未显示。

Answer 1

Here是您提出的问题的基本版本。

使用以下css

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

绝对位置，不会使你的div固定，当你滚动时，它会相应地移动。所以使用固定位置，它不会滚动，也会设置背景颜色，否则后面的内容会重叠，看起来像是透明的。要避免它，请使用background-color css属性。

Answer 2

你真的非常接近实现这一目标，你需要的只是两个调整。

将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 3

将absolute更改为fixed应该可以解决问题。