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

Question

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

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

但是，面板似乎被压扁了，#panel div 内的内容未显示。

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;
}