|
- The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset."
This may look like Greek to some :-) but in simple terms you can think of relative positioning as being relative to the position that the block would have had if no positioning was in use at all.
Try this little StyleMaster explanation of positioning.
A couple of quotes: -
"with CSS2, when you specify a position, it is with respect to the position
of the parent element. Don't get this confused with relative positioning,
which we'll look at below."
"Relative positioning is probably a little unfortunately named. Positioning
relative to what? A lot of people jump to the conclusion that relative positioning is when you specify a position with respect to the parent element, and absolute positioning is when the position is specified with respect to the top left hand corner of the page. But as we have just seen, this is not how it works.
OK, so what is relative? In essence, relative positioning places an element
with respect to where it would statically be positioned. When you relatively position an element, as a developer you are saying to a browser: "hey, take this paragraph, and put it 10 pixels down and 10 pixels to the right of where it would normally be."
A starting point on CSS would be the CSS level 1 specification.
After you have read and understood the specification, prowl about a few
Web sites that explain the realities and headaches of using CSS with the
non-conformant misimplementations that pervade the Web. Some favorites
include The Good Oil, Rich in Style, CSS Pointers Group, AgitProp, and WebReview's style section.
Q: - I have a div tag set as being relatively positioned on the page. inside this div tag i have three nested divs [...]
Elements are not tags and tags are not elements; let us keep the
terminology clear because, yes, it does make a difference.
Q: - I thought absolute positioning meant "place this object relative to the browsers top left co-ord of the view area" and relative positioning meant "place this object relative to the top left co-ord of it's parent layer". Is this wrong?
Yes, that is wrong. Have you read http://www.w3.org/TR/REC-CSS2/visuren? If you have not read that documentation, do not expect to understand or to correctly use CSS positioning. You will also need http://www.w3.org/TR/REC-CSS2/visudet#containing-block-details for a decent understanding.
You have interpreted 'position: absolute' as a restricted 'position:
fixed' (which actually allows positioning accroding to top, right, bottom,
and left offsets) and you have interpreted 'position: relative' as certain
cases of 'position: absolute'.
In CSS2, the declaration 'position: absolute' means that the box generated
will have a position that is relative to the padding edge of the nearest
ancestor with a 'position' property whose value (the computed value, I
interpret) is not 'static'. That ancestor may be the parent just as that
ancestor may be an element that is not the parent.
By the way, CSS does not use the term "layer". In CSS, there are only
boxes. Some boxes happen to be positioned and happen to have an explicit
stacking level, but such boxes are still boxes.
In CSS2, the declaration 'position: relative' means that the box generated
will have a position that is relative to what would have been the normal
position. |