html - 百分比(％)perent div 内位置绝对 div 的宽度问题

Question

我有两个 div，.div1 和 .div2，每个都有 20% 的宽度。我在 .div1 中还有另一个 div .bar。这个 .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;
}