how can I put an element below another element, that's not absolutely positioned?

[felipevaldez]

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 <select> tag, that
pops iots information above the elements next to it.

any ideas?
any help will be apreciated.

 

[Joshie Surber]

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....)

Sure you can:
http://developer.mozilla.org/en/docs/DOM:window.getComputedStyle is
cross platform.

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.

All you would need would be to set the position to absolute, top and
left (or bottom, or right) relative to (via JS math ops) the computed
style, and make sure to adjust the z-index. The higher the z-index, the
higher up (visually) in a stack of elements an element will be.

 

[RobG]

how can I put an element below another element, that's not absolutely
positioned?

This seems to have more to do with CSS than with JavaScript, but
anyway...

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

I guess you mean in terms of the DOM tree.

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.

I don't think you can do it with position absolute, unless you want X1
to sit over Y. You seem to be trying to make Y flow around X1, which
can't be done using position absolute. Absolutely positioned elements
are not part of the flow, so other elements will simply flow over/under
them depending on their relative z-indexes.

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),

It can, but I don't think it solves your problem.

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....)

Resizing the window will have no effect on absolutely position
elements, they are outside the document flow and will stay in their
position, regardless.

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.

Ask your question in a CSS group, you might be pleasantly surprised:

news:comp.infosystems.www.authoring.stylesheets

<URL:
http://groups.google.co.uk/group/comp.infosystems.www.authoring.stylesheets?lnk=gschg&hl=en

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.

insertBefore will solve your problem if it can be solved using DOM/CSS.
Provided X and Y are siblings, then to insert X1 between them:

X.insertBefore(X1, Y);

Even if you don't have a reference to Y, you can insert X1 immediately
after X using:

X.insertBefore(X1, X.nextSibling);


which works even if X doesn't have a next sibling.

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

Have a play with the following, the post in the CSS newsgroup suggested
above:

<title>Float play</title>

<style type="text/css">

#X {
border: 1px solid red;
float: left;
width: 100%;
z-index: 10;
}
#Y {
border: 1px solid blue;
float: right;
background-color: blue;
color: gold;
width: 100px;
height: 50px;
z-index: 15;
}
#Z, #A {
border: 1px solid green;
float: left;
width: 100%;
height: 50px;
z-index: 10;
}

#P {width: 99%;float: left; margin-right: -100px}

</style>

<div id="A"></div>
<div id="X"><p id="P">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Suspendisse tempor. Etiam nunc. Vivamus diam elit,
elementum eu, tempor vel, pellentesque quis, lorem. Mauris felis
turpis, commodo at, faucibus hendrerit, suscipit at, magna. Nullam odio
sem, laoreet nec, egestas feugiat, pellentesque id, libero. Fusce
placerat blandit orci.</p>
<div id="Y">Hey, I'm Y</div>
</div>
<div id="Z"><p>More lorem ipsum...</p></div>

 

[felipevaldez]

Sure you can:
http://developer.mozilla.org/en/docs/DOM:window.getComputedStyle is
cross platform.

thank you very much, this is exactly what I wanted, however, I does not
work on IE
(some suprise)
sadly, that makes it unusable...

 

[RobG]

thank you very much, this is exactly what I wanted, however, I does not
work on IE
(some suprise)
sadly, that makes it unusable...

The IE equivalent is getCurrentStyle. Search the archives, there are
plenty of examples of how to use the two together.

Try this one:

<URL:
http://groups.google.com.au/group/c...cording+to+background&rnum=1#dcc71655114af25b

 

[RobG]

RobG wrote:
[...]

The IE equivalent is getCurrentStyle.

Ooops, should have been "currentStyle".