absolute positioning when you don’t declare both offsets….
As if absolute positioning isn’t complicated enough…. I think I always assumed that an object would move to position 0,0 as soon as position:absolute was declared.
But in fact, all my tests of browsers today seemed to leave the element where it was and only adjust the position – relative to it’s positioned containing block — if the offset is specifically declared. (This is not very clear in the w3c specs.)
Thus, in two different students’ work, I observed absolutely positioned elements remain where they normally would have been in one dimension while being positioned in the other dimension with the declared offset. Declaring the other offset as zero (top:0; or left:0;) caused the element to adjust to the viewport as no other positioned elements had been defined.
I found this: (http://www.charlescooke.me.uk/web/lab_notes/pos_abs/index.html)
It is only the offsets which are measured with respect to the viewport and that only sometimes. If no offset is specified i.e. if it is unmentioned rather than set to zero the positioned element will remain where it would have been in normal flow. In other words positioning the element need not necessarily change its position from where it was it may just change its status to ‘positioned’. A method frequently employed is to set the declaration
position: relative;
either on the body or on a div without including an offset. It then becomes possible to position other elements with respect to the body or div without further ado.
Which makes the distinction between unmentioned and set to zero offsets.
I was grumbling about browsers being too kind and not referring back to the containing block or viewport in this case, but in fact, this is the common interpretation.
The interesting thing you can do with this is to have something act like a fixed position element, but not fixed to the viewport — by not mentioning any horizontal offset, the absolutely positioned sidebar remains offset from the top of the viewport and horizontally where it would have been otherwise.
Tags: absolute positioning, css