473,231 Members | 1,985 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,231 software developers and data experts.

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.

any ideas?
any help will be apreciated.

Sep 7 '06 #1
5 3956

fe**********@gmail.com wrote:
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...tComputedStyle 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.
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.

any ideas?
any help will be apreciated.
Sep 7 '06 #2
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

Sep 8 '06 #3
>
Sure you can:
http://developer.mozilla.org/en/docs...tComputedStyle 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...

Sep 9 '06 #4

fe**********@gmail.com wrote:

Sure you can:
http://developer.mozilla.org/en/docs...tComputedStyle 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...
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/co...c71655114af25b
>
--
Rob

Sep 10 '06 #5

RobG wrote:
[...]
The IE equivalent is getCurrentStyle.
Ooops, should have been "currentStyle".
--
Rob

Sep 10 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Travis Spencer | last post by:
Hello, I am having some problem with a statically positioned element being obscured by one that is absolutely positioned. To see what I am working on, go to...
0
by: Mike Kozlowski | last post by:
I have an absolutely positioned block on the top of my page, a block floated left, and a third block in the normal flow. IE6 and Mozilla 1.4 disagree on where the floated block should be placed --...
1
by: J. Potts | last post by:
Just out of curiosity, has anyone run into this problem? Someone where I work put a set of pages together with the following in the style sheet: BODY { position: absolute; margin-top: 0mm;...
4
by: mike eli | last post by:
Hi, I have several absolute positioned elements inside an absolute positioned DIV. I would like one of the nested elements to have a dynamic width. I set it's left and right attributes to 5, so...
8
by: Dag Sunde | last post by:
Imagine a mess of div-elements nested inside each other some relative, some absolute. Some of them grows when their children grows... And at some point, I want the x-coordinate of the bottom...
4
by: spivee | last post by:
I'm having an odd type of issue. I want to be able to pass an element name in my javascript event and find the location of the element, be it a div, span, img whatever, specifically the top and...
2
by: CRPietschmann | last post by:
I'm using the Microsoft Virtual Earth Version 1 Commercial Control. I want to make it so you can click on a pinpoint that's plotted on the map and all mouse events are passed to the map so that the...
4
by: john | last post by:
Hi to All, I am new to html authoring, so sorry if my terminology is not correct or exact. I would like to position a footer div to the bottom of the browser window. As I research in the web...
3
Banfa
by: Banfa | last post by:
This page contains a cut down version of this page. They both display the same problem, when the menu at the top is dropped down in IE7 the menu (which is positioned absolutely) disappears...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.