Div - how to place on on top of other?

[shapper]

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

[Ben C]

On 2007-01-03, shapper <md*****@gmail.comwrote:

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]

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 <md*****@gmail.comwrote:

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.

[boclair]

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 <md*****@gmail.comwrote:

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

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 <md*****@gmail.comwrote:
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

[Gus Richter]

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