Dims Dims - 4 months ago 7
HTML Question

Why left padding does not work?

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.

Answer

position: absolute; takes your element out of the normal flow. Since you specify it's left as 0, that's where it will be.