How Can I Put An Element Below Another Element, That's Not Absolutely Positioned?

how can I put an element below another element, that's not absolutely positioned? so I have a n element, called X, and next to that, an element Y

X
Y

XXXXXX
XXXXXX
XXXXXX

YYYYY
YYYYY
YYYYY

these elements are both visible:
when i click on X, i want to add to the page a new element X1, that's
below X, but on top of Y

XXXXXX
XXXXXX
XXXXXX

Y X1X1X1
Y X1X1X1
Y X1X1X1
YYYYY
YYYYY

this I can do easily with position:absolute, however, due to the flow
layout I'm currently using (and can't really change), I can't.


one way of solving the problem, could be to determine an absolutely
positioned element's X and Y coords, (and width and height) while i
doubt this can be done in a cross browser way (or at all),
when teh suer resizes the window, I'll be ni trouble (which will mean I
have to add onresize handlers, which, i dont really like....)

another way, would be playing with CSS properties, like float,
position:relative, overflow, etc.
but I don't know that much CSS to even try.

another way would be using the DOM to append an item, using
InsertBefore, or something like that,
but it appears that won't solve the problem of putting the new insetred
element X1 above Y.

what I'm trying to achieve, is something like the <selecttag, that
pops iots information above the elements next to it.