position to left in fixed in relation with absolute position

position to left in fixed in relation with absolute position

I have the following html...
<div id="one"><a href="http://www.stackoverflow.com/">one</a></div>
<div id="two">
<div class="same">
<a href="http://www.google.com/">two</a>
</div>
<div class="same">
<a href="http://www.google.com/">two</a>
</div>
</div>
And this is the css....
#one{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
top: 0;
}
#two{
background-color: green;
position: fixed;
top: 0px;
}
.same{
width: 200px;
height: 200px;
position: relative;
left: -200px;
}
demo
The element #two has no width and height. But inside this the .same has
the width and height of 200 pixels and left to -200 pixels but the #two is
still covering the background as it is behaving the width of 200 pixels
but inside this contents only go to left.