在百分比（％）父div内的位置绝对div的宽度问题

Question

我有两个div，.div1＆amp; .div2，每个宽度为20％。我在.bar内还有另一个div .div1。此.bar div的定位为absolute left 100%。 我希望.bar（蓝色div）在不同的屏幕尺寸下保持在同一点。

将蓝色条和灰色div保持在不同屏幕大小的同一点的步骤是什么？

HTML

<div class="div1">
    <div class="bar">
        This is a Bar
    </div>
</div>
<div class="div2">
    this is Div 2
</div>

CSS

.div1{
    background:red;
}
.div2{
     background:#ccc;
     margin-top:25px !important;
}
.div1,.div2{
    position:relative;
    width:20%;
    float:left;
    margin:0px 10px;
    height:180px;
}
.bar{
    background:blue;
    position:absolute;
    left:100%;
    top:0px;
    width:130px;
    z-index:10;

}

Fiddle

Answer 1

你去吧

http://jsfiddle.net/97s283he/2/

.div2{
     background:#ccc;
     left: 100px;
    margin-left: 0px;
}
.div1,.div2{
    position:relative;
    width:20%;
    float:left;
    height:180px;
}