如何将div修复到另一个div的右下角? (小提琴)

时间:2014-09-22 19:34:32

标签: html css position css-position positioning

无法找到关于我的问题的主题。

我有两个div,DEMO here

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

我希望标签固定在绿色div的右下角,在特定的位置:

距离绿色div的顶部0px距离(我认为无论如何都是默认值),

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

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浏览我的测试页面时发现了这一点,因为我的所有桌面浏览器窗口都被最大化了所以我甚至都注意不到它......

2 个答案:

答案 0 :(得分:2)

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

即可

检查DEMO

答案 1 :(得分:0)

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

将两个div包装到一个带position:relative的容器div中。

为标签定位

top:0;
margin-right:50px;