I was expecting the following will place inner (red) square at position 50,50 in browser window coordinate frame. But it didn't. Why?
<div style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: yellow; padding: 50px;">
<div style="position: absolute; left: 0px; right: 0px; width: 64px; height: 64px; background-color: red">
position: absolute; takes your element out of the normal flow. Since you specify it's left as 0, that's where it will be.