Position child element outside its parent

[vunet]

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

 

[Jonathan N. Little]

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; ...}

 

[vunet]

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; ...}

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.

 

[Bergamot]

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.

 

[vunet]

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

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.

 

[Ben C]

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.

 

[vunet]

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?

 

[Ben C]

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.

 

[rf]

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.

 

[dorayme]

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>

 

[Ben C]

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

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

 

[dorayme]

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>