Position child element outside its parent

Discussion in 'HTML' started by vunet, Mar 28, 2008.

  1. vunet

    vunet Guest

    How to position a child outside of the parent with CSS?

    <div id="parent">
    I am a parent
    <div id="child">
    I am child (a floating box outside my parent but
    positioned close to it)
    </div>
    </div>

    Like:

    [parent]

    [[child (outside)]]
    vunet, Mar 28, 2008
    #1
    1. Advertising

  2. vunet wrote:
    > How to position a child outside of the parent with CSS?
    >
    > <div id="parent">
    > I am a parent
    > <div id="child">
    > I am child (a floating box outside my parent but
    > positioned close to it)
    > </div>
    > </div>
    >
    > Like:
    >
    > [parent]
    >
    > [[child (outside)]]


    #parent { position: relative; ...}
    #child { position: absolute; ...}

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 28, 2008
    #2
    1. Advertising

  3. vunet

    vunet Guest

    On Mar 28, 3:07 pm, "Jonathan N. Little" <> wrote:
    > vunet wrote:
    > > How to position a child outside of the parent with CSS?

    >
    > > <div id="parent">
    > > I am a parent
    > > <div id="child">
    > > I am child (a floating box outside my parent but
    > > positioned close to it)
    > > </div>
    > > </div>

    >
    > > Like:

    >
    > > [parent]

    >
    > > [[child (outside)]]

    >
    > #parent { position: relative; ...}
    > #child { position: absolute; ...}
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    Thank you. That's exactly what I did. But how to move #child away from
    its #parent? when I set top and left to some values it seems to be as
    if "body" is the parent even though I append child to parent.
    vunet, Mar 28, 2008
    #3
  4. vunet

    Bergamot Guest

    vunet wrote:
    > On Mar 28, 3:07 pm, "Jonathan N. Little" <> wrote:
    >> vunet wrote:
    >> > How to position a child outside of the parent with CSS?

    >>
    >> #parent { position: relative; ...}
    >> #child { position: absolute; ...}

    >
    > when I set top and left to some values it seems to be as
    > if "body" is the parent even though I append child to parent.


    That's why you should post a URL instead of a code snippet. There is
    obviously more to this than you're telling.

    --
    Berg
    Bergamot, Mar 28, 2008
    #4
  5. vunet

    vunet Guest

    On Mar 28, 4:02 pm, Bergamot <> wrote:
    > vunet wrote:
    > > On Mar 28, 3:07 pm, "Jonathan N. Little" <> wrote:
    > >> vunet wrote:
    > >> > How to position a child outside of the parent with CSS?

    >
    > >> #parent { position: relative; ...}
    > >> #child { position: absolute; ...}

    >
    > > when I set top and left to some values it seems to be as
    > > if "body" is the parent even though I append child to parent.

    >
    > That's why you should post a URL instead of a code snippet. There is
    > obviously more to this than you're telling.
    >
    > --
    > Berg


    Sorry I do not have external URL now. I simply want to know how to
    position any Pop-up Box element next to each cell of my table when
    user moves mouse over that cell. It's like a balloon effect. But that
    balloon should pop up right outside the cell. That's all.
    vunet, Mar 28, 2008
    #5
  6. vunet

    Ben C Guest

    On 2008-03-28, vunet <> wrote:
    > On Mar 28, 4:02 pm, Bergamot <> wrote:
    >> vunet wrote:
    >> > On Mar 28, 3:07 pm, "Jonathan N. Little" <> wrote:
    >> >> vunet wrote:
    >> >> > How to position a child outside of the parent with CSS?

    >>
    >> >> #parent { position: relative; ...}
    >> >> #child { position: absolute; ...}

    >>
    >> > when I set top and left to some values it seems to be as
    >> > if "body" is the parent even though I append child to parent.

    >>
    >> That's why you should post a URL instead of a code snippet. There is
    >> obviously more to this than you're telling.
    >>
    >> --
    >> Berg

    >
    > Sorry I do not have external URL now. I simply want to know how to
    > position any Pop-up Box element next to each cell of my table when
    > user moves mouse over that cell. It's like a balloon effect. But that
    > balloon should pop up right outside the cell. That's all.


    You should have said it was a table-cell in the first place-- your
    example was a div, which is normally display: block.

    Firefox doesn't allow table cells to be containers for positioned
    descendents. That's why it doesn't work.

    Firefox is just about within the spec as it says the effect of position:
    relative on table cells is undefined (although I think it really means
    the effect of trying to offset them, not the side-effect of being a
    container for positioned descendents).

    You can put a div inside the table cell and make the div position:
    relative. Then put the child inside the div.
    Ben C, Mar 28, 2008
    #6
  7. vunet

    vunet Guest

    On Mar 28, 4:28 pm, Ben C <> wrote:
    > On 2008-03-28, vunet <> wrote:
    >
    >
    >
    > > On Mar 28, 4:02 pm, Bergamot <> wrote:
    > >> vunet wrote:
    > >> > On Mar 28, 3:07 pm, "Jonathan N. Little" <> wrote:
    > >> >> vunet wrote:
    > >> >> > How to position a child outside of the parent with CSS?

    >
    > >> >> #parent { position: relative; ...}
    > >> >> #child { position: absolute; ...}

    >
    > >> > when I set top and left to some values it seems to be as
    > >> > if "body" is the parent even though I append child to parent.

    >
    > >> That's why you should post a URL instead of a code snippet. There is
    > >> obviously more to this than you're telling.

    >
    > >> --
    > >> Berg

    >
    > > Sorry I do not have external URL now. I simply want to know how to
    > > position any Pop-up Box element next to each cell of my table when
    > > user moves mouse over that cell. It's like a balloon effect. But that
    > > balloon should pop up right outside the cell. That's all.

    >
    > You should have said it was a table-cell in the first place-- your
    > example was a div, which is normally display: block.
    >
    > Firefox doesn't allow table cells to be containers for positioned
    > descendents. That's why it doesn't work.
    >
    > Firefox is just about within the spec as it says the effect of position:
    > relative on table cells is undefined (although I think it really means
    > the effect of trying to offset them, not the side-effect of being a
    > container for positioned descendents).
    >
    > You can put a div inside the table cell and make the div position:
    > relative. Then put the child inside the div.


    Yes! That fixed. Now I know.
    In IE6 however, this floating div hides behind cell's borders and some
    images within the cells (not upfront as supposed to). I added z-index
    which did not solve the problem. Is there something else I do not know
    about the browser's behavior?
    vunet, Mar 28, 2008
    #7
  8. vunet

    Ben C Guest

    On 2008-03-28, vunet <> wrote:
    > On Mar 28, 4:28 pm, Ben C <> wrote:
    >> On 2008-03-28, vunet <> wrote:

    [...]
    >> > Sorry I do not have external URL now. I simply want to know how to
    >> > position any Pop-up Box element next to each cell of my table when
    >> > user moves mouse over that cell. It's like a balloon effect. But that
    >> > balloon should pop up right outside the cell. That's all.

    >>
    >> You should have said it was a table-cell in the first place-- your
    >> example was a div, which is normally display: block.
    >>
    >> Firefox doesn't allow table cells to be containers for positioned
    >> descendents. That's why it doesn't work.
    >>
    >> Firefox is just about within the spec as it says the effect of position:
    >> relative on table cells is undefined (although I think it really means
    >> the effect of trying to offset them, not the side-effect of being a
    >> container for positioned descendents).
    >>
    >> You can put a div inside the table cell and make the div position:
    >> relative. Then put the child inside the div.

    >
    > Yes! That fixed. Now I know.
    > In IE6 however, this floating div hides behind cell's borders and some
    > images within the cells (not upfront as supposed to). I added z-index
    > which did not solve the problem. Is there something else I do not know
    > about the browser's behavior?


    What I don't know about IE's behaviour would fill a book.

    You could try alternative solutions and hope to luck into one that it
    can manage.

    You could leave the parent div position: static and offset the child div
    within it with top and left margins (instead of with top and left),
    provided you don't mind also setting width explicitly on both the parent
    and the child div.
    Ben C, Mar 28, 2008
    #8
  9. vunet

    rf Guest

    "vunet" <> wrote in message
    news:...
    > On Mar 28, 4:28 pm, Ben C <> wrote:
    >> On 2008-03-28, vunet <> wrote:
    >>
    >>
    >>
    >> > On Mar 28, 4:02 pm, Bergamot <> wrote:
    >> >> vunet wrote:
    >> >> > On Mar 28, 3:07 pm, "Jonathan N. Little" <>
    >> >> > wrote:
    >> >> >> vunet wrote:
    >> >> >> > How to position a child outside of the parent with CSS?

    >>
    >> >> >> #parent { position: relative; ...}
    >> >> >> #child { position: absolute; ...}

    >>
    >> >> > when I set top and left to some values it seems to be as
    >> >> > if "body" is the parent even though I append child to parent.

    >>
    >> >> That's why you should post a URL instead of a code snippet. There is
    >> >> obviously more to this than you're telling.

    >>
    >> >> --
    >> >> Berg

    >>
    >> > Sorry I do not have external URL now. I simply want to know how to
    >> > position any Pop-up Box element next to each cell of my table when
    >> > user moves mouse over that cell. It's like a balloon effect. But that
    >> > balloon should pop up right outside the cell. That's all.

    >>
    >> You should have said it was a table-cell in the first place-- your
    >> example was a div, which is normally display: block.
    >>
    >> Firefox doesn't allow table cells to be containers for positioned
    >> descendents. That's why it doesn't work.
    >>
    >> Firefox is just about within the spec as it says the effect of position:
    >> relative on table cells is undefined (although I think it really means
    >> the effect of trying to offset them, not the side-effect of being a
    >> container for positioned descendents).
    >>
    >> You can put a div inside the table cell and make the div position:
    >> relative. Then put the child inside the div.

    >
    > Yes! That fixed. Now I know.
    > In IE6 however, this floating div hides behind cell's borders and some
    > images within the cells (not upfront as supposed to). I added z-index
    > which did not solve the problem. Is there something else I do not know
    > about the browser's behavior?


    Give the containing div the same z-index as the child is one fix. However a
    URL is now probably mandatory.

    --
    Richard.
    rf, Mar 28, 2008
    #9
  10. vunet

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > What I don't know about IE's behaviour would fill a book.


    This statement shows not only admirable humility but knowledge in
    itself.

    If you gathered all the website makers together, I wonder if there is an
    upper limit on the size of the book that the most ignorant author could
    fill? <g>

    --
    dorayme
    dorayme, Mar 28, 2008
    #10
  11. vunet

    Ben C Guest

    On 2008-03-28, dorayme <> wrote:
    > In article <>,
    > Ben C <> wrote:
    >
    >> What I don't know about IE's behaviour would fill a book.

    >
    > This statement shows not only admirable humility but knowledge in
    > itself.


    No humility was intended, I was just insulting IE as usual.
    Ben C, Mar 29, 2008
    #11
  12. vunet

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-03-28, dorayme <> wrote:
    > > In article <>,
    > > Ben C <> wrote:
    > >
    > >> What I don't know about IE's behaviour would fill a book.

    > >
    > > This statement shows not only admirable humility but knowledge in
    > > itself.

    >
    > No humility was intended, I was just insulting IE as usual.


    Perhaps you missed that I went on to add the insult (in the bit you
    snipped).

    In any case, what you intended is irrelevant. I say you were humble and
    good. If my authority alone is not enough, consider this: had you
    intended any such thing, it would have shown, ipso facto, that you were
    neither being humble, truly humble nor admirably humble.

    <g>

    --
    dorayme
    dorayme, Mar 29, 2008
    #12
    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. Replies:
    4
    Views:
    2,531
  2. thunk
    Replies:
    1
    Views:
    308
    thunk
    Mar 30, 2010
  3. Noel Dolan
    Replies:
    0
    Views:
    229
    Noel Dolan
    Jul 18, 2004
  4. Replies:
    0
    Views:
    136
  5. Bitswapper
    Replies:
    5
    Views:
    139
    Prasad, Ramit
    Aug 27, 2013
Loading...

Share This Page