I was expecting the following will place inner (red) square at position 50,50 in browser window coordinate frame. But it didn’t. Why?
<body>
<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">
</div>
</div>
</body>
SORRY MY FAULT
I was wishing to make “top:0px” for inner DIV but wrote “right:0px” instead. Just a mistake.
position: absolute;takes your element out of the normal flow. Since you specify it’s left as 0, that’s where it will be.