user31782 user31782 - 3 years ago 164
HTML Question

How does fixed positioning work when a non-zero unitless value is provided (for say, bottom)?

I understand how positioning works in general when the values of bottom, top, right and left are given in pixels.

  • bottom: 2px
    will put the box 2px above the bottom of the page.

  • Similarly
    top: 2px
    will put the box 2 pixel below the top of the page.

Reading another question, I've also come to know that the value 0 is equivalent to 0px, 0em etc because units are not necessary for a zero value.

What I don't understand is what do the unit-less nonzero value specify? For example, in this demo the bottom is initially set as 0. If I change the value and set it as say
or any numerical value like
, the green box will be situated as high as possible (that is, just below the rest of the content) without overlapping other content on the page.

So, what do these non zero numerical values for bottom, top, left and right correspond to? How does the browser position these elements when such a value is provided?

Answer Source

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:1 or 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 auto.

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 (height, top, bottom) are 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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download