如何将一个 div 固定到另一个 div 的右下角？（小提琴）答案

【问题标题】：How to fix a div to the bottom-right of another div? (fiddle)如何将一个 div 固定到另一个 div 的右下角？（小提琴）
【发布时间】：2014-11-16 21:02:57
【问题描述】：

找不到与我的问题完全相关的主题。

我有这两个 div，DEMO here:

<div id="green"></div>
<div class="tab">Tab</div>

我希望将选项卡固定在绿色 div 的右下角的特定位置：

距绿色 div 顶部 0px 的距离（我认为这是默认值），

距离该绿色 div 的右边缘 50 像素。

CSS：

#green {
    width:1020px;
    height:200px;
    background:green;
}

.tab {
    background-color: #EEE;
    width: 150px;
    height: 15px;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    text-align: center;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .77em;
    padding-top: 3px;
    position: absolute;
    right: 465px;
    border: 1px solid #E9E0E1;
    border-top: 0;
}

在演示中，您可以看到一旦调整窗口大小，选项卡就会移开。实际上，我在使用 Iphone 浏览测试页面时发现了这一点，因为我所有的桌面浏览器窗口都已最大化，所以我什至都没有注意到它......

【问题讨论】：

标签： html css position css-position positioning

【解决方案1】：

只需将您的 right 属性替换为 left:0px;

查看DEMO

【讨论】：

我不知道它在演示中是如何工作的，但在我的完整网站上它不起作用。你能解释一下从右到左解决这个问题的意义吗？
尝试将这两个盒子放入另一个盒子（如.wrapper）并将position:relative属性设置为此。这是完整的代码 --> DEMO
谢谢！与包装器一起使用..对此有何解释？
有很好的解释-LINK

【解决方案2】：

在此处更新小提琴：https://jsfiddle.net/vfrL7qub/9/

用position:relative将两个div包装成一个容器div。

为你的标签定位它

top:0;
margin-right:50px;

【讨论】：

啊，你想要底部右边的标签。新小提琴：jsfiddle.net/vfrL7qub/10