Div - how to place on on top of other?

Hello,

I have 3 Divs as follow:

<div id="Container">
<div id="Header">header</div>
<div id="Text">text</div>
</div>

I need the div "Text" to have an absolute position inside div
"Container" and to overlap the div "Header".
How can I do something like this?

Thanks,
Miguel

On 2007-01-03, shapper <mdmoura (AT) gmail (DOT) com> wrote:

Hello,

I have 3 Divs as follow:

div id="Container"
div id="Header">header</div
div id="Text">text</div
/div

I need the div "Text" to have an absolute position inside div
"Container" and to overlap the div "Header".
How can I do something like this?

It'll just work, try it.

Absolutely positioned boxes get stacked on top of normal-flow boxes
anyway.

Hi,

I don't understand what you said.
The code as I have don't solve the my problem.

I want the div TEXT to be over the div HEADER.

Thanks,
Miguel

Ben C wrote:

On 2007-01-03, shapper <mdmoura (AT) gmail (DOT) com> wrote:
Hello,

I have 3 Divs as follow:

div id="Container"
div id="Header">header</div
div id="Text">text</div
/div

I need the div "Text" to have an absolute position inside div
"Container" and to overlap the div "Header".
How can I do something like this?

It'll just work, try it.

Absolutely positioned boxes get stacked on top of normal-flow boxes
anyway.

shapper wrote:

Hi,

I don't understand what you said.
The code as I have don't solve the my problem.

I want the div TEXT to be over the div HEADER.

Thanks,
Miguel

Ben C wrote:
On 2007-01-03, shapper <mdmoura (AT) gmail (DOT) com> wrote:
Hello,

I have 3 Divs as follow:

div id="Container"
div id="Header">header</div
div id="Text">text</div
/div

I need the div "Text" to have an absolute position inside div
"Container" and to overlap the div "Header".
How can I do something like this?
It'll just work, try it.

Absolutely positioned boxes get stacked on top of normal-flow boxes
anyway.

Perhaps an web page to see what is being attempted? Re-positioning the
text may not be appropriate. Given that though.

For CSS positioning see http://www.w3.org/TR/REC-CSS2/visuren.html or
search for tutorials on CSS positioning.

An alternative method is to set margin values on #text (negative
margin-top value will display higher in the flow)

(BTW for semantic markup replace the div element with a heading element)

Louise

It is not easy to post some code as I am using Asp.Net and the code is
generated at runtime so first I need to understand how to solve my
problem with CSS.

Consider what I wrote before:

<div id="Container">
<div id="Header">header</div>
<div id="Text">text</div>
</div>

I was doing the following:

#Container {position:relative}
#Text {position: absolute; left:0; right:0}

So when "Text" is visible it should overlap "Header".

Well, this is what I think it should be happening.
Somehow, "Text" looks like it is not inside "Container". Why?
Because I keep having "Text" showing on the top left corner of my
browser and not on the top left corner of "Container".

Any idea?

Thanks,
Miguel



boclair wrote:

shapper wrote:
Hi,

I don't understand what you said.
The code as I have don't solve the my problem.

I want the div TEXT to be over the div HEADER.

Thanks,
Miguel

Ben C wrote:
On 2007-01-03, shapper <mdmoura (AT) gmail (DOT) com> wrote:
Hello,

I have 3 Divs as follow:

div id="Container"
div id="Header">header</div
div id="Text">text</div
/div

I need the div "Text" to have an absolute position inside div
"Container" and to overlap the div "Header".
How can I do something like this?
It'll just work, try it.

Absolutely positioned boxes get stacked on top of normal-flow boxes
anyway.


Perhaps an web page to see what is being attempted? Re-positioning the
text may not be appropriate. Given that though.

For CSS positioning see http://www.w3.org/TR/REC-CSS2/visuren.html or
search for tutorials on CSS positioning.

An alternative method is to set margin values on #text (negative
margin-top value will display higher in the flow)

(BTW for semantic markup replace the div element with a heading element)

Louise

shapper wrote:

It is not easy to post some code as I am using Asp.Net and the code is
generated at runtime so first I need to understand how to solve my
problem with CSS.

Consider what I wrote before:

div id="Container"
div id="Header">header</div
div id="Text">text</div
/div

I was doing the following:

#Container {position:relative}
#Text {position: absolute; left:0; right:0}

So when "Text" is visible it should overlap "Header".

It will if you replace right:0 with top:0;

--
Gus