Positioning

Something I sent earlier that seemed to just get buried I think deserves 
another crack.

Relative and Absolute positioning are tricky and I think there's a good way 
to handling it. First when I'm trying to position an element relative to 
another element I want to make it relative to one of 36 points which can be 
described by 3 properties (vertical, horizontal, box).

Also I don't always want to attach cordinates (0,0) to that position, so 
instead I can use similar versions of those same 3 properties to set what 
part of the box is attached to its relative element. (Confusing I know, 
though really quite simple with some examples).

You have the 4 boxes that make up the box model (content, padding, border, 
margin) and 3 positions each for the horizontal (left, center, right) and 
vertical (top, middle, bottom).

So I have an element (X) that I'm trying to make relative to another element 
(Y). No I can make any point on Y relative to any point on X. Some examples.

X and Y flush, left to right.
Y (left, top, margin) would be set relative to X (right, top, margin).

Y below X, both centered with respect to each other.
Y (center, top, margin) relatve to X (center, bottom, margin).

Y showing up inside X's top, right border (at the edge of the padding), as a 
series of buttons.
Y (right, top, margin) relative to X (right, top, padding).

If I'm going to attach something then basically I want to attach it to 
either the viewport, the body, the parent or some id-based element. This can 
be covered with 4 different values (one of them being id(foo)).

One of the beauty's that I see in this is that it covers pretty much all 
cases. The calcuations are simple. There are only two properties involved. 
It's also very easy to see exactly where Y is going to end up relative to X 
and there's very little ambiguity as to where it can end up. Oh and it gets 
rid of 90% of cases where I wanted to do math on different types of lengths 
(in a simpler way to boot).

The above two properties also eliminate the need for the seperate absolute 
and relative values of display. Absolute is just relative to the html 
element. Fixed is really a relative value that doesn't scroll and probably 
should be defined that way. So we've gone from 4 values of display to 2 
(static and relative).

Float is a combination of an positioning property and a content flow 
property. Flow should allow a positioned element to control the flow of 
content around it. The values as far as I can see it should be: left, right, 
both (or around), neither and none (or behind). This would allow an author 
to style the text around any element however they chose. This would only 
apply to block elements. The values inside and outside could equate to left 
and right given a page-based setting.

So taking a quick perusal of this we see the new property set:

position: (static | relative)

relative: (parent | viewport | body | id(foo)) (content | padding | border | 
margin) (left | center | right) (top | middle | bottom)

attach: (content | padding | border | margin) (left | center | right) (top | 
middle | bottom)

flow: (left | right | both | neither | none | inside | outside)

There's more, but I think that's more than enough for now.

Orion Adrian

Received on Saturday, 8 May 2004 11:59:21 UTC