Position child element outside its parent

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

On Mar 28, 3:07 pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> 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 wrote:

On Mar 28, 3:07 pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> 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

On Mar 28, 4:02 pm, Bergamot <berga... (AT) visi (DOT) com> wrote:

vunet wrote:
On Mar 28, 3:07 pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> 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.

On 2008-03-28, vunet <vunet.us (AT) gmail (DOT) com> wrote:

On Mar 28, 4:02 pm, Bergamot <berga... (AT) visi (DOT) com> wrote:
vunet wrote:
On Mar 28, 3:07 pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> 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.

On Mar 28, 4:28 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

On 2008-03-28, vunet <vunet... (AT) gmail (DOT) com> wrote:



On Mar 28, 4:02 pm, Bergamot <berga... (AT) visi (DOT) com> wrote:
vunet wrote:
On Mar 28, 3:07 pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> 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?

On 2008-03-28, vunet <vunet.us (AT) gmail (DOT) com> wrote:

On Mar 28, 4:28 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
On 2008-03-28, vunet <vunet... (AT) gmail (DOT) com> 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.

"vunet" <vunet.us (AT) gmail (DOT) com> wrote

On Mar 28, 4:28 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
On 2008-03-28, vunet <vunet... (AT) gmail (DOT) com> wrote:



On Mar 28, 4:02 pm, Bergamot <berga... (AT) visi (DOT) com> wrote:
vunet wrote:
On Mar 28, 3:07 pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net
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.

In article <slrnfuqoct.1fs.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> 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