fe**********@gmail.com wrote:
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/com...nk=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 <selecttag, 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>
--
Rob
