css - 添加叠加 div

Question

我正在创建一个全屏设计，其中：

• 顶部 % 底部条是特定高度，但 100% 宽度
• 中间左栏是特定宽度但 100% 高度
• 中间的右边栏占据了剩下的空间

我正在尝试创建一个“选项” div，它会从右下角弹出，将我的地图覆盖在中间右侧。

但是，通过查看我的代码，您可以看到我所做的使选项 div 从底部 div 开始并向下移动。此外，我给了它一个 100% 的宽度，但它并没有适应其容器的宽度，而是屏幕的宽度。

#options {
    position: absolute;
    background: #39E023;
    width: 100%;
    height: 200px;
    text-align: right;
}

多谢你们！

Answer 1

给你的 div 一个margin-top等于高度的负数：

#options {
    position: absolute;
    background: #39E023;
    width: 100%;
    height: 200px;
    text-align: right;
    margin-top: -200px;
}

Answer 2

只需给出中右容器position:relative，然后将选项 div 设置为left:0; bottom:0;

我更新了你的小提琴