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

Discussion in 'Javascript' started by felipevaldez@gmail.com, Sep 7, 2006.

  1. Guest

    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.
     
    , Sep 7, 2006
    #1
    1. Advertising

  2. 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/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.

    > 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, Sep 8, 2006
    #2
    1. Advertising

  3. RobG Guest

    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/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>


    --
    Rob
     
    RobG, Sep 8, 2006
    #3
  4. Guest

    , Sep 9, 2006
    #4
  5. RobG Guest

    RobG, Sep 10, 2006
    #5
  6. RobG Guest

    RobG wrote:
    [...]
    > The IE equivalent is getCurrentStyle.


    Ooops, should have been "currentStyle".


    --
    Rob
     
    RobG, Sep 10, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John A Grandy
    Replies:
    3
    Views:
    352
    darrel
    Jun 15, 2004
  2. Guybrush Threepwood
    Replies:
    1
    Views:
    504
    Mitja Trampus
    Dec 14, 2005
  3. Replies:
    13
    Views:
    985
    =?ISO-8859-1?Q?G=E9rard_Talbot?=
    May 5, 2006
  4. Hoss
    Replies:
    0
    Views:
    116
  5. maya
    Replies:
    4
    Views:
    263
Loading...

Share This Page