I understand how positioning works in general when the values of bottom, top, right and left are given in pixels.
The first part of the question is already answered by Brian D and so I wouldn't go into much details. In short, when you provide a non-zero and unit-less value for a property, it is invalid and so the browser just ignores it and treats it as though it was not present at all.
Now, coming to the second part of the question, as to why
bottom:786 (or any other value) results in the same output, it is because when you don't assign any value for
bottom, its value becomes the default
auto. In this case, you haven't assigned any explicit value for
top also and so its value also becomes
As per CSS Positioning Spec:
If all three of top, height, and bottom are auto: First set any auto values for margin-top and margin-bottom to 0, then set top to the static position, and finally apply rule number three below.
As you can see from the above statement, when all the three (
auto, the browser sets
top to the static position which means it is not positioned in any special way and it just follows the page's flow. This is exactly the reason why irrespective of what number (unit less value) is given, it always stays below the first part of the content (all of which also have static positioning).